Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:angular:angular_modulhasznalat

< Angular

Angular modulhasználat

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.

oktatas/web/angular/angular_modulhasznalat.txt · Utolsó módosítás: 2025/03/02 12:35 szerkesztette: admin