Bestand met de componentklasse in Angular

Het belangrijkste onderdeel van elk component is zijn functionaliteit, dat wil zeggen het programma zelf. In Angular wordt de functionaliteit van een component geschreven in de TypeScript-taal en vertegenwoordigt een OOP-klasse.

In elk component bevindt deze klasse zich in een bestand met de extensie .ts. In ons hoofdcomponent zal dit het bestand zijn app.component.ts.

Laten we de inhoud van dit bestand bekijken. Let allereerst op de klasse van ons component:

export class AppComponent {
	title: string = 'test';
}

Op deze klasse wordt de decorator @Component toegepast. Deze decorator neemt als parameter een object dat ons component configureert:

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule],
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css'],
})

In de eigenschap templateUrl is het pad naar het bestand dat de markup van ons component bevat, ingesteld.

In de eigenschap styleUrls is een array van paden naar CSS-bestanden ingesteld, die de markup van ons component stijlen. Zoals je ziet, kan het stijlbestand er meer dan één zijn.

In de eigenschap selector is de selector van de HTML-tag ingesteld, waarin de HTML-code van ons component wordt weergegeven (gemonteerd). In ons geval zien we de naam app-root. Op deze naam correspondeert een gelijknamige tag. Deze tag is geschreven in het lay-outbestand src/index.html. Op de plek waar deze tag is geschreven, zal de markup van ons component worden ingevoegd.

In de eigenschap imports zijn de modules aangegeven die in ons component worden geïmporteerd.

In de eigenschap standalone zal altijd de waarde true staan. Momenteel is dit eerder een functioneel onderdeel van Angular, dus verdiep je er voorlopig niet te veel in.

Open het bestand app.component.ts en bestudeer het.

Maak meerdere stijlbestanden en sluit deze aan in de decorator.