Comprendere i componenti Angular

I componenti sono gli elementi fondamentali delle applicazioni Angular. In questa lezione imparerà a conoscere i componenti e il loro ciclo di vita.

Che cos'è un componente?

Un componente è una parte dell'interfaccia utente che include codice HTML, CSS e TypeScript. Rappresenta una sezione dell'interfaccia utente dell'applicazione.

Creare un componente

Utilizzi Angular CLI per creare facilmente un componente:

ng generate component my-component

ng generate component my-component

Struttura di un componente

Un componente Angular di solito è composto da quattro file principali:

• .html: template
• .ts: logica
• .css: stili
• .spec.ts: test

Decorator del componente

Il decorator @Component collega la classe del componente al relativo template e agli stili.

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})

Hook del ciclo di vita

I componenti Angular dispongono di hook del ciclo di vita che consentono di eseguire codice in momenti specifici. Tra gli hook più comuni ci sono ngOnInit() e ngOnDestroy().

Utilizzare ngOnInit()

ngOnInit() viene eseguito dopo che Angular ha inizializzato i dati del componente. È ideale per la configurazione iniziale:

ngOnInit() {
  console.log('Component initialized!');
}

Visualizzare i componenti

Utilizzi il selector del componente negli altri template per visualizzarlo:

<app-my-component></app-my-component>

Riepilogo

Ha imparato a conoscere i componenti, a crearli e a utilizzarne gli hook del ciclo di vita. Ottimo lavoro!