Lapsikomponentit Angularissa

Kuten mainittiin oppaan alussa, Angularissa koko projekti jaetaan komponentteihin. Edellisissä oppitunneissa työskentelimme vain oletusarvoisesti luodun pääkomponentin kanssa. Opitaan nyt luomaan lapsikomponentteja.

Uusien komponenttien koodi luodaan automaattisesti Angularin avulla erityisellä terminaalin komennolla: generate component. Sanan component jälkeen on kirjoitettava uuden komponenttimme nimi. Oletetaan, että haluamme generoida komponentin user:

ng generate component user

Komennon suorittamisen jälkeen näemme, että meille on ilmestynyt uusi kansio app/user. Siinä sijaitsevat kaikki komponentin vakio- tiedostot.

Komponenttitiedostossa user.component.ts luodaan automaattisesti komponentin dekoraattori:

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

Myös tässä tiedostossa luodaan automaattisesti komponentin luokka:

export class UserComponent {

}

Nyt lapsikomponenttimme on liitettävä vanhempakomponenttiin. Olkoon vanhempana komponentti app, joka on oletusarvoisesti mukana kehyksen asennuksen yhteydessä. Tuodaan se sisään komponenttiimme:

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

Komponentin dekoraattorissa avaimessa imports ilmoitetaan tuotu komponenttimme:

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

Nyt voimme näyttää lapsikomponentin sisällön vanhemmassakomponentissa. Tätä varten vanhemman templaatissa on kirjoitettava erityinen tagi, jonka nimi on määritelty dekoraattorin @Component ominaisuudessa selector. Meidän tapauksessamme se on tagi app-user. Kirjoitetaan se vanhemman templaattiin:

some text
<app-user></app-user>

Generoi komponentti ProductComponent. Liitä tämä komponentti projektisi pää- komponenttiin.

Tee muutoksia lapsikomponentin templaattiin. Varmista, että ne otetaan käyttöön selaimessa.

Vaihda lapsikomponentin CSS-tyylejä. Varmista, että ne otetaan käyttöön selaimessa.

Tee lapsikomponenttiin ominaisuudet name ja price. Näytä niiden arvot lapsikomponentin templaatissa.