[[oktatas:web:angular|< Angular]]

====== Angular - beépített komponens ======

  * **Szerző:** Sallai András
  * Copyright (c) 2022, Sallai András
  * Szerkesztve: 2022, 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Bevezetés =====

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

{{:oktatas:web:angular:componens_egymasba_00.png|}}
===== Projekt létrehozása =====

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

<code>
ng new app01 --routing false
cd app01
ng generate component comp1
</code>

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


===== Beépítés =====

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


<code html src/app/app.component.html>
//...
import { JarmuComponent } from './jarmu/jarmu.component';
//...

@Component({
//...
  imports: [RouterOutlet,JarmuComponent],
//...
})

</code>

<code html src/app/app.component.html>
<h1>Valmai</h1>

<app-comp1></app-comp1>
</code>

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:

<code html src/app/app.component.html>
<h1>Valmai</h1>

<app-comp1></app-comp1>

<app-comp2></app-comp2>
</code>

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


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

<app-comp2></app-comp2>
</code>