File con la classe del componente in Angular

La parte principale di qualsiasi componente è la sua funzionalità, cioè il suo programma. In Angular, la funzionalità del componente è scritta nel linguaggio TypeScript e rappresenta una classe OOP.

In ogni componente, questa classe si trova in un file con estensione .ts. Nel nostro componente principale, questo sarà il file app.component.ts.

Familiarizziamo con il contenuto di questo file. Per cominciare, presta attenzione alla classe del nostro componente:

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

A questa classe viene applicato il decoratore @Component. Questo decoratore accetta come parametro un oggetto, che configura il nostro componente:

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

Nella proprietà templateUrl è impostato il percorso al file contenente il markup del nostro componente.

Nella proprietà styleUrls è impostato l'array dei percorsi ai file CSS, che stilizzano il markup del nostro componente. Come puoi vedere, il file di stili può non essere uno solo.

Nella proprietà selector è impostato il selettore del tag HTML, in cui verrà visualizzato (montato) il codice HTML del nostro componente. Nel nostro caso, vediamo il nome app-root. A questo nome corrisponde un tag omonimo. Questo tag è scritto nel file di layout src/index.html. Nel punto in cui è scritto questo tag, verrà inserito il markup del nostro componente.

Nella proprietà imports sono indicati i moduli che vengono importati nel nostro componente.

Nella proprietà standalone sarà sempre impostato il valore true. Al momento questa è più che altro una funzionalità di servizio di Angular, quindi per ora non approfondirla.

Apri il file app.component.ts e studialo.

Crea diversi file di stili e colleciali nel decoratore.