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

====== Angular modulhasználat ======

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

===== Modulhasználat =====

==== standalone komponensek ====

A modulokat a komponensben importáljuk. 

A dekorátorban találunk egy imports nevű kulcsot.

Például:

<code javascript>
import { FormsModule } from '@angular/forms';

//...

@Component({
  selector: 'app-valami',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './valami.component.html',
  styleUrl: './valami.component.css'
})
</code>



==== NgModule-hoz adás ====

Ha nem használunk standalone komponenseket, akkor a használt modulokat az NgModule-hoz kell adni.

Az input elem tartalmát, modellként szeretnénk kötni a sablon változóihoz. 
Ehhez szükségünk van a **FormsModule** modulra.

Szerkesszük az **src/app/app.module.ts** fájlt:

Vegyünk fel egy import sort:
<code javascript>
import { FormsModule } from '@angular/forms';
</code>


Az imports tömbbe vegyük fel a modult:

<code javascript>
  imports: [

    FormsModule,

  ],
</code>

Ha már van valami az "import" tömbben azt hagyjuk meg.

===== A FormsModule próbája =====

Próbáljuk ki a modult.

A HTML sablonban, vegyünk fel egy beviteli mezőt:

<code html>
<label for="name">Név</label>
<input id="name" [(ngModel)]="name">
<br>
</code>

Teljes kód:
<code html src/app/app.component.html>
<h1>Teszt</h1>

<p>{{name | uppercase}}</p>

<label for="name">Név</label>
<input id="name" [(ngModel)]="name">
<br>

<button (click)="valt()">Vált</button>

</code>


Vegyünk fel az **app.component.ts** fájl AppComponent osztályában egy
name nevű változót:
<code javascript>
name: number = '';
</code>



Nézzük meg a böngészőben az eredményt. Gépeljünk valamit a beviteli mezőbe, közben figyeljük a p elem tartalmát.