Fil med komponentklass i Angular

Huvuddelen av alla komponenter är dess funktionalitet, det vill säga själva programmet. I Angular skrivs komponentens funktionalitet i programmeringsspråket TypeScript och representerar en OOP-klass.

I varje komponent finns denna klass i en fil med filändelsen .ts. I vår huvudkomponent blir detta filen app.component.ts.

Låt oss bekanta oss med innehållet i denna fil. Var först uppmärksam på klassen för vår komponent:

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

Decoratorn @Component tillämpas på denna klass. Denna dekoratör tar som sin parameter ett objekt som konfigurerar vår komponent:

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

I egenskapen templateUrl sätts sökvägen till filen som innehåller layouten för vår komponent.

I egenskapen styleUrls sätts en array av sökvägar till CSS-filer som stylar layouten för vår komponent. Som du ser kan det finnas fler än en stilmall.

I egenskapen selector sätts selektorn för HTML-taggen där (monteras) HTML-koden för vår komponent ska visas. I vårt fall ser vi namnet app-root. Detta namn motsvarar en tagg med samma namn. Denna tagg finns i layoutfilen src/index.html. På den plats där denna tagg är skriven kommer layouten för vår komponent att infogas.

I egenskapen imports anges de moduler som importeras till vår komponent.

I egenskapen standalone kommer alltid värdet true att anges. För närvarande är detta mestadels en intern sak i Angular, så förstå dig inte på den ännu.

Öppna filen app.component.ts och studera den.

Skapa några filer med stilar och anslut dem i dekoratören.