[[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: 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:
Teljes kód:

Teszt

{{name | uppercase}}


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.