Componenti Figli in Angular

Come accennato all'inizio del tutorial, in Angular l'intero progetto è suddiviso in componenti. Nelle lezioni precedenti abbiamo lavorato solo con il componente principale, creato per impostazione predefinita. Ora impariamo a creare componenti figli.

Il codice dei nuovi componenti viene generato automaticamente da Angular tramite un comando speciale del terminale: generate component. Dopo la parola component bisogna scrivere il nome del nostro nuovo componente. Supponiamo di voler generare il componente user:

ng generate component user

Dopo l'esecuzione del comando vedremo che è apparsa una nuova cartella app/user. In essa si troveranno tutti i file standard del componente.

Nel file del componente user.component.ts sarà creato automaticamente il decoratore del componente:

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

Inoltre, in questo file sarà creato automaticamente la classe del componente:

export class UserComponent {

}

Ora il nostro componente figlio deve essere collegato al componente genitore. Supponiamo che il genitore sia il componente app, presente inizialmente all'installazione del framework. Importiamolo nel nostro componente:

import { UserComponent } from './user/user.component';

Nel decoratore del componente, nella chiave imports indichiamo il nostro componente importato:

@Component({
	selector: 'app-root',
	imports: [UserComponent], // qui
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Ora possiamo visualizzare il contenuto del componente figlio in quello genitore. Per fare ciò, nel file con il template del genitore bisogna scrivere un tag speciale, il cui nome è impostato nella proprietà selector del decoratore @Component del figlio. Nel nostro caso è il tag app-user. Scriviamolo nel template del genitore:

del testo
<app-user></app-user>

Generate il componente ProductComponent. Collegate questo componente al componente principale del vostro progetto.

Apportate modifiche al template del componente figlio. Assicuratevi che vengano applicate nel browser.

Cambiate gli stili CSS del componente figlio. Assicuratevi che vengano applicati nel browser.

Nel componente figlio, create le proprietà name e price. Visualizzate i loro valori nel template del componente figlio.