Angular One-Way Data Binding Nedir?

Merhaba arkadaşlar, bu yazımda sizlere Angular One-Way Data Binding konusundan bahsedeceğim.

Data Binding, Angular da önemli özelliklerden birisidir. Data Binding işlemleri Typescript ile Html arasındaki iletişimi sağlar. İki Adet başlıkta bunları inceleyebiliriz.

Bunlar;

One-Way Data Binding
Two-Way Data Binding

One-Way Data Binding(Tek yönlü)

One-Way Data Binding işlemi Typescript içerisinde değişiklik yaptığımızda Html üzerinde değişikliğin olduğu basit ve tek yönlü bir iletişim şeklidir.

One Way Data Binding işlemini 3 alt başlıkta ele almak gerekirse bunlar;

• String Interpolation
• Property Binding
• Event Binding

String Interpolation

Typescript dosyamızda bir tanımlama yaptığımızda, bu tanımı html içerisinde çağırabiliriz. Tanımlamayı html içerisinde çağırmak için {{ }} parantezleri arasında yazmamız gerekir. Bu parantezlere kıvırcık parantez denilebilir. Hemen örneklendirerek göstermek istiyorum.

Dashboard.component.ts içerisinde bir tanımlama yapmak istiyorum. oneWay isimli bir tanımlama gerçekleştirdim ve buna bir değer atadım. Aşağıda görüldüğü gibi.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  oneWay:string = "One-Way Data Binding Title";

  constructor() { }

  ngOnInit(): void {
  }

}

Şimdi bu atanan değeri dashboard.component.html içerisinde kullanalım.

<h1> {{oneWay}} </h1>

Görüldüğü üzere kıvırcık parantezler içerisinde Typescript içerisinde yazdığım değerin ismini yazıyorum. Bunu gerçekleştirdiğimizde html sayfamızda h1 tagı arasında One-Way Data Binding Title yazısı görünecektir.

Property Binding

Property binding işlemi oluşturulan bir nesnenin property’sini belirlemek için typescript kodunda belirlenir ve bu alana bağlanmış olur. Örneğin bir buttonumuz var ve butonun title özelliğinde gözükecek değeri typescript içerisinde tanımlayıp gösterebiliriz.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  btnTitle:string = "Save Settings!";

  constructor() { }

  ngOnInit(): void {
  }

}

<button type="button" [title]="btnTitle"> Save </button>

Yukarıdaki örneğimizde dashboard.component.ts içerisinde bir btnTitle isminde tanımlama gerçekleştirdik. Daha sonra Html içerisinde de hem button tag’ının title property’sini typescript içerisinde belirledik ve yazmış olduk.

Event Binding

Event Binding işlemi kullanıcıların etkileşimine ihtiyaç duyulan yerlerde kullanılabilir. Örneğin sayfa üzerinde bir butonumuz var diyelim ve butona tıklandığında bir uyarı mesajı, bir işlem gerçekleştirmek için kullanılabilir. Hemen örneklendirerek açıklamak istiyorum.

Dashboard.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  save(){
    alert("Product saved!")
  }

}

Dashboard.component.html

<button type="button" (click)="save()"> Save </button>

Yukarıdaki örnekte de görüldüğü üzere Event Binding işlemini gerçekleştirmiş olduk. Typescript dosyamızda save() isminde bir metod tanımlaması yaptık ve içerisine bir uyarı mesajı verdik. Html dosyamız içerisinde ise parantezler içerisinde click event’ımızı yazdık. İçerisine de save metodumuzu belirttik. Butonumuza tıklandığında save() metodumuz çalışmasını gerçekleştirecek ve ekrana bir uyarı mesajı verecektir.

Angular One-Way Data Binding konusu ile ilgili anlatacaklarım bu kadar.

Umarım faydalı olur.

Angular.io üzerinden de binding işlemlerini inceleyebilirsiniz.

Bir sonraki yazımda ise Angular Two-Way Data Binding Nedir? konusuna değineceğim.

Görüşmek üzere 🙂