Fil med komponentklasse i Angular

Hoveddelen av enhver komponent er dens funksjonalitet, det vil selve programmet. I Angular skrives komponentens funksjonalitet i programmeringsspråket TypeScript og representerer en OOP-klasse.

I hver komponent er denne klassen plassert i en fil med filendelsen .ts. I vår hovedkomponent vil dette være filen app.component.ts.

La oss bli kjent med innholdet i denne filen. Først, legg merke til klassen til komponenten vår:

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

På denne klassen brukes dekoratoren @Component. Denne dekoratoren tar som sin parameter et objekt som konfigurerer komponenten vår:

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

I egenskapen templateUrl er stien til filen som inneholder HTML-oppsettet for komponenten vår, spesifisert.

I egenskapen styleUrls er en matrise av stier til CSS-filer som styler HTML-oppsettet til komponenten vår, spesifisert. Som du ser, kan det være mer enn én stilfil.

I egenskapen selector er velgeren for HTML-taggen der HTML-koden til komponenten vår skal vises (monteres), spesifisert. I vårt tilfelle ser vi navnet app-root. Dette navnet tilsvarer en tagg med samme navn. Denne taggen er skrevet i layout-filen src/index.html. På plassen der denne taggen er skrevet, vil HTML-oppsettet til komponenten vår bli satt inn.

I egenskapen imports er modulene som importeres til komponenten vår, spesifisert.

I egenskapen standalone vil det alltid stå verdien true. For øyeblikket er dette mer en funksjon i Angular, så tenk ikke for mye på den ennå.

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

Lag flere filer med stiler og koble dem til i dekoratoren.