1.13.1. fejezet, Forms

Beküldte pzoli - 2024, február 22 - 2:03du

Importálni kell a FormsModule-t az alkalmazás app.module.ts fájlba:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
 
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Ez szükséges a kétirányú kapcsolatkezeléshez, hogy fel tudjuk vennni a [(ngModel)]-t az input tulajdonságai közé.

<input [(ngModel)]="title" />
<h1 [innerHTML]="title"></h1>
{{ title }}
<button (click)="resetTitle()">Reset title</button>

Egy DOM elemere hivatkozhatunk közvetlenül, ha használjuk a #azonosito deklarációt. Pl.:

<input #titleInput [(ngModel)]="title" />
<h1 [innerHTML]="title"></h1>
{{ title }}
<button (click)="resetTitle()">Reset title</button>
<button (click)="reverseTitle(titleInput.value)">Reverse title</button>

A komponens példa pedig lehet ez:

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'homework4angular';
  resetTitle() {
    this.title = 'homework4angular';
  }
  reverseTitle(value: string) {
    this.title = value.split('').reverse().join('');
  }
}

Itt a title tulajdonságra közvetlenül is hivatkozhattunk volna, a reverse-be nem szükséges átadni paraméterként az értéket, de most a DOM elemre hivatkozást szemléltettem.