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

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

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

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

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.

===== Próba =====

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.