Fil med komponentklasse i Angular

Hoveddelen af enhver komponent er dets funktionalitet, det vil sige selve det program. I Angular skrives komponentens funktionalitet i sproget TypeScript og repræsenterer en OOP-klasse.

I hver komponent er denne klasse placeret i en fil med filendelsen .ts. I vores hovedkomponent vil dette være filen app.component.ts.

Lad os stifte bekendtskab med indholdet af denne fil. For det første, vær opmærksom på vores komponents klasse:

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

På denne klasse anvendes dekoratøren @Component. Denne dekoratør tager med sin parameter et objekt, som konfigurerer vores komponent:

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

I egenskaben templateUrl er stien til filen, der indeholder vores komponents HTML-opstilling, angivet.

I egenskaben styleUrls er arrayet af stier til CSS-filer, der styler HTML-opstillingen af vores komponent, angivet. Som du kan se, kan der være mere end én stilfil.

I egenskaben selector er selectoren for HTML-tagget, som HTML-koden for vores komponent vil blive vist (monteret) i, angivet. I vores tilfælde ser vi navnet app-root. Dette navn svarer til et tag med samme navn. Dette tag er skrevet i layoutfilen src/index.html. På det sted, hvor dette tag er skrevet, vil HTML-opstillingen af vores komponent blive indsat.

I egenskaben imports er de moduler, som importeres til vores komponent, angivet.

I egenskaben standalone vil der altid være angivet værdien true. Lige nu er dette mere en funktionalitet i Angular, så forstå ikke for meget i den endnu.

Åbn filen app.component.ts og studer den.

Lav flere filer med stile og tilslut dem i dekoratøren.