Fișierul cu clasa componentului în Angular

Partea principală a oricărui component este funcționalitatea sa, adică propriul său program. În Angular, funcționalitatea componentului este scrisă în limbajul TypeScript și reprezintă o clasă OOP.

În fiecare component, această clasă este localizată într-un fișier cu extensia .ts. În componentul nostru principal acesta va fi fișierul app.component.ts.

Să ne familiarizăm cu conținutul acestui fișier. Pentru început, acordați atenție clasei componentului nostru:

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

Acestei clase i se aplică decoratorul @Component. Acest decorator prin parametrul său primește un obiect care configurează componentul nostru:

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

În proprietatea templateUrl este stabilită calea către fișierul care conține markup-ul componentului nostru.

În proprietatea styleUrls este stabilit un array de căi către fișierele CSS care stilizează markup-ul componentului nostru. După cum vedeți, fișierul de stiluri poate fi nu doar unul.

În proprietatea selector este stabilit selectorul tag-ului HTML în care va fi afișat (montat) codul HTML al componentului nostru. În cazul nostru, vedem numele app-root. Acestui nume îi corespunde un tag cu același nume. Acest tag este scris în fișierul de layout src/index.html. În acel loc, unde este scris acest tag, va fi inserat markup-ul componentului nostru.

În proprietatea imports sunt indicate modulele, care sunt importate în componentul nostru.

În proprietatea standalone va fi întotdeauna indicată valoarea true. Acum aceasta este mai degrabă un detaliu de serviciu al Angular, deci deocamdată nu intrați în detalii.

Deschideți fișierul app.component.ts și studiați-l.

Creați câteva fișiere cu stiluri și conectați-le în decorator.