Komponenty potomne w Angular

Jak wspomniano na samym początku podręcznika, w Angular cały projekt jest dzielony na komponenty. W poprzednich lekcjach pracowaliśmy tylko z głównym komponentem, utworzonym domyślnie. Nauczmy się teraz tworzyć komponenty potomne.

Kod nowych komponentów jest automatycznie generowany przez Angular za pomocą specjalnego polecenia terminala: generate component. Po słowie component należy wpisać nazwę naszego nowego komponentu. Załóżmy, że chcemy wygenerować komponent user:

ng generate component user

Po wykonaniu polecenia zobaczymy, że pojawił się nowy folder app/user. Będą się w nim znajdować wszystkie standardowe pliki komponentu.

W pliku komponentu user.component.ts zostanie automatycznie utworzony dekorator komponentu:

@Component({
	selector: 'app-user',
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Również w tym pliku zostanie automatycznie utworzona klasa komponentu:

export class UserComponent {

}

Teraz nasz komponent potomny należy podłączyć do rodzica. Niech rodzicem będzie komponent app, domyślnie obecny przy instalacji frameworka. Zaimportujmy do niego nasz komponent:

import { UserComponent } from './user/user.component';

W dekoratorze komponentu w kluczu imports wskażmy nasz zaimportowany komponent:

@Component({
	selector: 'app-root',
	imports: [UserComponent], // tutaj
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Teraz możemy wyprowadzić zawartość komponentu potomnego w rodzicu. W tym celu w pliku z szablonem rodzica należy wpisać specjalny tag, którego nazwa jest podana we właściwości selector dekoratora @Component potomka. W naszym przypadku jest to tag app-user. Wpiszmy go w szablonie rodzica:

jakiś tekst
<app-user></app-user>

Wygeneruj komponent ProductComponent. Podłącz ten komponent do głównego komponentu twojego projektu.

Wprowadź zmiany w szablonie komponentu potomnego. Upewnij się, że zostaną zastosowane w przeglądarce.

Zmień style CSS komponentu potomnego. Upewnij się, że zostaną zastosowane w przeglądarce.

W komponencie potomnym utwórz właściwości name i price. Wyprowadź ich wartości w szablonie komponentu potomnego.