Componenten begrijpen

Gebruik Angular CLI om eenvoudig een component te maken:

ng generate component my-component

ng generate component my-component

Een Angular-component heeft meestal vier belangrijke bestanden:

• .html: sjabloon
• .ts: logica
• .css: stijlen
• .spec.ts: tests

De @Component-decorator koppelt de klasse van je component aan het sjabloon en de stijlen ervan.

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

Angular-componenten hebben levenscyclus-hooks waarmee je op specifieke momenten code kunt uitvoeren. Veelgebruikte hooks zijn onder andere ngOnInit() en ngOnDestroy().

ngOnInit() wordt uitgevoerd nadat Angular de componentgegevens heeft geïnitialiseerd. Het is ideaal voor de eerste configuratie:

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

Gebruik de selector van je component in andere sjablonen om deze weer te geven:

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

Je hebt geleerd wat componenten zijn, hoe je ze maakt en wat hun levenscyclus-hooks doen. Goed gedaan!