Plik z klasą komponentu w Angular

Główną częścią każdego komponentu jest jego funkcjonalność, czyli właściwie jego program. W Angularze funkcjonalność komponentu jest pisana w języku TypeScript i reprezentuje klasę OOP.

W każdym komponencie ta klasa znajduje się w pliku z rozszerzeniem .ts. W naszym głównym komponencie będzie to plik app.component.ts.

Zapoznajmy się z zawartością tego pliku. Na początku zwróć uwagę na klasę naszego komponentu:

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

Na tę klasę jest zastosowany dekorator @Component. Ten dekorator przyjmuje jako parametr obiekt, który konfiguruje nasz komponent:

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

We właściwości templateUrl jest ustawiona ścieżka do pliku zawierającego znaczniki naszego komponentu.

We właściwości styleUrls jest ustawiona tablica ścieżek do plików CSS, które stylizują znaczniki naszego komponentu. Jak widzisz, plików ze stylami może być więcej niż jeden.

We właściwości selector jest ustawiony selektor tagu HTML, do którego będzie wyświetlany (montowany) kod HTML naszego komponentu. W naszym przypadku widzimy nazwę app-root. Tej nazwie odpowiada tag o tej samej nazwie. Ten tag jest napisany w pliku szablonu src/index.html. W to miejsce, gdzie jest napisany ten tag, będzie wstawiana znacznik naszego komponentu.

We właściwości imports są wskazane moduły, które są importowane do naszego komponentu.

We właściwości standalone zawsze będzie wskazana wartość true. Teraz jest to raczej służbowa rzecz Angulara, więc na razie nie wnikaj w nią.

Otwórz plik app.component.ts i przeanalizuj go.

Utwórz kilka plików ze stylami i podłącz je w dekoratorze.