Angular Two-Way Data Binding [The Basics]

Angular Two-Way Data Binding özelliğini gerçek hayatta kullandığımız input elementi ve üyelik formu üzerinden anlatacağım.

Öncelikle yeni register component’ i oluşturuyorum;

ng generate component register

two-way data binding yapmak için ngModel ve input elementlerini kullanacağız, Angular’ da ngModel kullanabilmek için AppModule’ e FormsModule’ ü import etmemiz ve imports dizisine eklememiz gerekiyor ;

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// import ettik
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { RegisterComponent } from './register/register.component';

@NgModule({
  declarations: [
    AppComponent,
    RegisterComponent
  ],
  imports: [
    BrowserModule,
      // import dizisine ekledik
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

register.component.html template’ i aşağıdaki şekilde oluşturuyoruz;

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email adresi</label>
        <input type="email" class="form-control" name="email" [(ngModel)]="email">
        <small id="emailHelp" class="form-text text-muted">Girmiş olduğunuz email adresi : {{ email }} </small>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>

input’ a [(ngModel)]="email" şeklinde email model’ ini eklemiş olduk.

email model’ i template’ den register component’ e devamlı olarak var olan değerini gönderiyor. Register component’ de sahip olduğu tüm modelleri template’ e gönderiyor.

<small id="emailHelp" class="form-text text-muted">Girmiş olduğunuz email adresi : {{ email }} </small>

Template’ deki bu kısım component’ in email modelini dinliyor.

Ve bu sayede input’ a girdiğiniz her karekter, önce component’e ordan tekrar template’ e geliyor.