Angular ngModel Direktifi - İki Yönlü Veri Bağlama

            Angular Çift Yönlü Bağlama Nedir Bakalım!

Başla

Angular form elementlerinde kullanılan "ngModel" direktifine göz atacağız. Çift yönlü bağlamaya gitmeden önce, altında yatan event ve property binding işlemlerine bakalım.

Event Binding

Kullanıcı taraflı eylemlerin yakalanması.

• Sentaksı (event)="ifade" şeklindedir.
• Aşağıdaki butonun click olayı, testEvent($event) metodunu çağırıyor.
• $event yakalanan olayın ta kendisidir. Parametre olarak geçiriliyor ki Component sınıfındaki metotta kullanılabilsin.
• Kısacası element' den component' e doğru bir bağlama yapılıyor. İşte event binding.
Dahili olarak kullanılabilen event' ları burada görebilirsiniz.

<button (click)="testEvent($event)">Tıkla</button>

export class AppComponent {
  title = 'app works!';

  testEvent(event:any) {
    console.log(event.innerHTML); // output: Tıkla
  }
}

Property Binding:

Component' in bir özelliğini( property) element' in bir özelliğine bağlama

• Bu bağlamanın sentakslarından biri, [dom_property]="component_property" şeklindedir. (Üç bağlama şekli var.)
• Aşağıda button nesnesinin property' lerine nasıl erişilebileceği gösterilmiştir.

<button [innerHTML]="myText" [name]="myName" [type]="myButton" [id]="myId" [attr.value]="btnValue"></button> 

export class AppComponent {
  
  myText="Tıkla";
  myName="guroo";
  myButton="button"
  myId="5";
  btnValue ="Benim Button";
}

Diğer HTML DOM özelliklerini buradan görebilirsiniz.

Two-way Data Binding:

Hem event hem de property bağlama işlemi

• Property ile event binding özelliğinin soyutlanmasıyla elde edilmiştir.
• Bu nedenle sentaksı [()] ikisinin birleşimi şeklinde belirlenmiş.
• [()] sentaksı "banana box" olarak adlandırılıyor.

Aşağıda two-way-data binding açık hali görülmekte. "name" property' si input' un "value" property' sine ilk değer olarak bağlanıyor. "(input)" event HTML5 ile gelen ve her veri girişinde tetiklenen bir olay. Kullanıcının her bir veri girişinden sonra, Angular name değerine, hedef event( $event.target)' ın değerini atıyor.

<input [value]="name" (input)="name=$event.target.value" >

export class AppComponent {

  name="Test";
  
}

ngModel

• İşte Angular bu iki olayın kolayca kullanılabilmesi için ngModel direktifini sağlıyor.
• Bu direktif sadece uygun elementlerde kullanılabiliyor. (form elements)
• Aşağıda name property' si, hem normal yöntem hem de banana-box yöntemiyle iki yönlü bağlamaya tabi tutulmuş.
• ngModel property' si input value değerini set ediyor. ngModelChange ise DOM' da bir değişiklik olduğunda bunu yayıyor(emit) ve bu bilgiye $event ile ulaşıyoruz. Artık $event.target.value ifadesini kullanmayız. Çünkü ngModelChange zaten sadece gerekli datayı yayar.
• Görüleceği üzere ngModel property' si için ngModelChange event' ı çağrılıyor. Yani banana-box ile kendi direktifinizi yazmak isterseniz [(custom)] için (customChange) isimli bir event oluşturmalısınız.

<input [ngModel]="name" (ngModelChange)="name=$event">
<input [(ngModel)]="name" >

export class AppComponent {

  name="Test";
  
}

Bu direktif FormModule tarafından sağlandığı için, modülün aşağıdaki gibi ayrıca dahil edilmesi gerekir.

@NgModule({
 ...
  imports: [
    BrowserModule,
    FormsModule
  ]
...
})
export class AppModule { }

Bitir