Componenti di Angular: Guida rapida con esempi

L’architettura di Angular si basa su una fondamentale unità di costruzione: il componente. Se sei nuovo nel mondo di Angular, o semplicemente desideri una rapida rinfrescata, sei nel posto giusto. Questo articolo ti guiderà attraverso le nozioni fondamentali dei componenti Angular, come crearli sia manualmente che tramite CLI, e ti mostrerà esempi pratici di come utilizzarli.

Cos’è un componente?

In Angular, un componente controlla una porzione di una pagina. Puoi immaginare ogni componente come un blocco individuale di HTML, CSS e logica. È proprio questa modulazione che rende Angular così flessibile e riutilizzabile.

Creare un Componente Manualmente

Creare un componente in Angular manualmente è sorprendentemente semplice. Ecco un esempio basilare:

import { Component } from '@angular/core';

@Component({
  selector: 'app-mio-componente',
  template: `<h1>Ciao, mondo di Angular!</h1>`,
  styles: [`
    h1 {
      color: blue;
    }
  `]
})

export class MioComponente {
}

Nell’esempio sopra, abbiamo definito un componente che visualizza “Ciao, mondo di Angular!” in un titolo colorato di blu.

Creare un Componente con Angular CLI

L’Angular CLI è uno strumento incredibilmente utile che facilita notevolmente la creazione e gestione di progetti Angular. Per creare un nuovo componente con l’Angular CLI, basta eseguire il seguente comando:

ng generate component nome-del-componente

O, in forma abbreviata:

ng g c nome-del-componente

Questo comando creerà automaticamente una directory per il tuo componente con quattro file: uno per il CSS, uno per il template HTML, uno per la logica TypeScript e uno per i test.

Struttura di un Componente

1. 1. Importazione: Importiamo il decoratore Component da @angular/core.
   2. Decoratore: Usiamo il decoratore @Component per segnalare ad Angular che questa classe è un componente. Qui definiamo metadati come il selettore e il template.
   3. Classe: La classe rappresenta la logica del componente. Può contenere dati, metodi e tutto ciò che il componente può necessitare.

Utilizzare il Componente

Una volta creato il componente, possiamo usarlo in un’altra parte dell’applicazione aggiungendo il suo selettore nel template HTML. Basandoci sull’esempio precedente, l’aggiunta del componente sarebbe così:

<app-mio-componente></app-mio-componente>