Tartalomjegyzék

< Angular

Angular - beépített komponens

Bevezetés

Routing nélkül a komponenseknek csak egymásba építve van értelme.

Projekt létrehozása

Hozzunk létre egy projektet app01 néven, majd benne egy comp1 nevű komponenst.

ng new app01 --routing false
cd app01
ng generate component comp1

Az app01 projektet routing nélkül lett létrehozva.

Beépítés

A comp1 komponenst beépítjük az app komponensbe:

src/app/app.component.html
//...
import { JarmuComponent } from './jarmu/jarmu.component';
//...
 
@Component({
//...
  imports: [RouterOutlet,JarmuComponent],
//...
})
src/app/app.component.html
<h1>Valmai</h1>
 
<app-comp1></app-comp1>

Ahova szeretném beépíteni, egy olyan HTML elemet készítek, aminek a neve app szóval kezdődik, majd kötőjel után a komponensünk neve, ahogy azt a példában is látjuk.

Másik komponens

ng generate component comp2

A comp2 komponenst is beépítjük az app komponensbe:

src/app/app.component.html
<h1>Valmai</h1>
 
<app-comp1></app-comp1>
 
<app-comp2></app-comp2>

Az app komponens helyett egy komponens beépíthető a másik komponensbe is.

src/app/comp1/comp1.component.html
<p>comp1 works!</p>
 
<app-comp2></app-comp2>