Child Components in Angular

Zoals vermeld aan het begin van de tutorial, wordt in Angular het hele project opgedeeld in components. In eerdere lessen hebben we alleen gewerkt met het hoofdcomponent dat standaard is aangemaakt. Laten we nu leren hoe we child components kunnen maken.

De code voor nieuwe components wordt automatisch gegenereerd door Angular met behulp van een speciale terminalopdracht: generate component. Na het woord component moeten we de naam van ons nieuwe component schrijven. Stel we willen een component user genereren:

ng generate component user

Na het uitvoeren van de opdracht zullen we zien dat er een nieuwe map app/user is verschenen. Hierin bevinden zich alle standaard bestanden van het component.

In het componentbestand user.component.ts wordt automatisch een componentdecorator aangemaakt:

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

Ook wordt in dit bestand automatisch de componentklasse aangemaakt:

export class UserComponent {

}

Nu moeten we ons child component aansluiten op het parent component. Laat het parent component app zijn, dat standaard aanwezig is bij de installatie van het framework. We importeren ons component hierin:

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

In de componentdecorator, in de sleutel imports, vermelden we ons geïmporteerde component:

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

Nu kunnen we de inhoud van het child component weergeven in het parent component. Hiervoor moeten we in het templatebestand van de parent een speciale tag schrijven, waarvan de naam is ingesteld in de eigenschap selector van de decorator @Component van de child. In ons geval is dit de tag app-user. Laten we deze in de template van de parent schrijven:

some text
<app-user></app-user>

Genereer een component ProductComponent. Sluit dit component aan op het hoofdcomponent van je project.

Breng wijzigingen aan in de template van het child component. Zorg ervoor dat deze worden toegepast in de browser.

Wijzig de CSS-stijlen van het child component. Zorg ervoor dat deze worden toegepast in de browser.

Maak in het child component de eigenschappen name en price. Geef hun waarden weer in de template van het child component.