Tartalomjegyzék
Angular modulhasználat
- Szerző: Sallai András
- Copyright © 2022, Sallai András
- Szerkesztve: 2022, 2023, 2025
- 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:
import { FormsModule } from '@angular/forms'; //... @Component({ selector: 'app-valami', standalone: true, imports: [FormsModule], templateUrl: './valami.component.html', styleUrl: './valami.component.css' })
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:
import { FormsModule } from '@angular/forms';
Az imports tömbbe vegyük fel a modult:
imports: [ FormsModule, ],
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:
<label for="name">Név</label> <input id="name" [(ngModel)]="name"> <br>
Teljes kód:
- 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>
Vegyünk fel az app.component.ts fájl AppComponent osztályában egy name nevű változót:
name: number = '';
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.