Componente Copil în Angular

După cum am menționat la începutul tutorialului, în Angular întregul proiect este împărțit în componente. În lecțiile anterioare am lucrat doar cu componenta principală, creată implicit. Să învățăm acum cum să creăm componente copil.

Codul noilor componente este generat automat de Angular cu ajutorul unei comenzi speciale din terminal: generate component. După cuvântul component trebuie să scriem numele noii noastre componente. Să presupunem că vrem să generăm componenta user:

ng generate component user

După executarea comenzii vom vedea că o nouă folder app/user a apărut. În el se vor găsi toate fișierele standard ale componentei.

În fișierul cu componenta user.component.ts va fi creat automat decoratorul componentei:

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

De asemenea, în acest fișier va fi automat creată clasa componentei:

export class UserComponent {

}

Acum componenta noastră copil trebuie conectată la cea părinte. Să presupunem că părintele este componenta app, prezentă inițial la instalarea framework-ului. Să o importăm în el pe componenta noastră:

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

În decoratorul componentei în cheia imports să indicăm componenta noastră importată:

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

Acum putem afișa conținutul componentei copil în cea părinte. Pentru aceasta, în fișierul cu șablonul (template-ul) părintelui trebuie scris un tag special, al cărui nume este dat în proprietatea selector a decoratorului @Component al copilului. În cazul nostru, acesta este tag-ul app-user. Să îl scriem în șablonul părintelui:

ceva text
<app-user></app-user>

Generați componenta ProductComponent. Conectați această componentă la componenta principală a proiectului dvs.

Aduceți modificări în șablonul componentei copil. Asigurați-vă că acestea se aplică în browser.

Schimbați stilurile CSS ale componentei copil. Asigurați-vă că acestea se aplică în browser.

În componenta copil, creați proprietățile name și price. Afișați-le valorile în șablonul componentei copil.