Dceřiné komponenty v Angular

Jak bylo zmíněno na samém začátku učebnice, v Angular je celý projekt rozdělen na komponenty. V předchozích lekcích jsme pracovali pouze s hlavním komponentem, vytvořeným ve výchozím nastavení. Pojďme se nyní naučit vytvářet dceřiné komponenty.

Kód nových komponentů je automaticky generován Angular pomocí speciálního příkazu terminálu: generate component. Po slovu component je třeba napsat název našeho nového komponentu. Předpokládejme, že chceme vygenerovat komponent user:

ng generate component user

Po provedení příkazu uvidíme, že se objevila nová složka app/user. V ní budou umístěny všechny standardní soubory komponentu.

V souboru komponentu user.component.ts bude automaticky vytvořen dekorátor komponentu:

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

Také v tomto souboru bude automaticky vytvořena třída komponentu:

export class UserComponent {

}

Nyní je třeba náš dceřiný komponent připojit k nadřazenému. Nechť nadřazeným je komponent app, který je původně přítomen při instalaci frameworku. Importujme do něj náš komponent:

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

V dekorátoru komponentu v klíči imports uvedeme náš importovaný komponent:

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

Nyní můžeme vypsat obsah dceřiného komponentu v nadřazeném. K tomu je v souboru s template nadřazeného komponentu třeba napsat speciální tag, jehož název je zadán ve vlastnosti selector dekorátoru @Component potomka. V našem případě je to tag app-user. Napišme jej do template nadřazeného komponentu:

nějaký text
<app-user></app-user>

Vygenerujte komponent ProductComponent. Připojte tento komponent k hlavnímu komponentu vašeho projektu.

Proveďte změny v template dceřiného komponentu. Ujistěte se, že se projeví v prohlížeči.

Změňte CSS styly dceřiného komponentu. Ujistěte se, že se projeví v prohlížeči.

V dceřiném komponentu vytvořte vlastnosti name a price. Vypište jejich hodnoty v template dceřiného komponentu.