Derinlemesine yazılım eğitimleri için kanalımı takip edebilirsiniz...

Angular 17.2 – Model Inputs

Yazar: Gençay · 05 Mart 2024

Merhaba,

Bu içeriğimizde Angular 17.2 versiyonuyla gelen ve bir diğer Signal API’si olan Model Inputs özelliğini inceleyecek ve Angular 17.1 ile gelmiş olan önceki yazılarımızda değerlendirmiş olduğumuz Input Signals özelliğiyle karşılaştırmasını yapıyor olacağız.

İlk olarak input signals özelliğinin read only bir davranış sergilediğinden bahsederek girizgahta bulunalım istiyorum. Yani alttaki örnek kod bloğunu ele alırsak eğer;

@Component({
  selector: 'app-child',
  standalone: true,
  template: `
  Child <br>
  Input Data : {{inputData()}} <br>
  <button (click)="toggle()">Toggle</button>
  `
})
export class ChildComponent {
  inputData = input();

  toggle() {

  }
}

‘inputData’ adıyla tanımlanmış olan signal input değişkeni ya initial value olarak ya da parent component aracılığıyla doldurulabilmekte lakin read only olduğu için bir daha bir değer set edilememektedir.

Ha tabi ki de istisna olarak two-way data-binding özelliği kullanılarak değeri aşağıdaki gibi güncellenebilmektedir.

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, NgOptimizedImage, ChildComponent, FormsModule],
  template: `
    <input type="text" [(ngModel)]="data">
    <br>
    <app-child [inputData]="data"></app-child>
  `
})
export class AppComponent {
  data: string = "";
}

Model Input değişkeni ise benzer amaçlarla kullanılabilen, writable olan ve input/output olarak davranış sergileyen bir signal yapılanmasıdır.

@Component({
  selector: 'app-child',
  standalone: true,
  template: `
  Child <br>
  Input Data : {{inputData()}} <br>
  Model Data : {{modelData()}} <br>
  <button (click)="toggle()">Toggle</button>
  `
})
export class ChildComponent {
  inputData = input();
  modelData = model();

  toggle() {
    this.modelData.set("Model data changed");
  }
}

Yukarıdaki örnek kod bloğundan da anlaşılacağı üzere ilk değer inital value olarak verilebileceği gibi parent component’ten de alınabilmekte ya da set fonksiyonuyla mevcut değeri değiştirilebilmektedir.

Ve bu model input özelliği de beklenildiği üzere two-way data-binding davranışından istifade edebilmektedir.

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, NgOptimizedImage, ChildComponent, FormsModule],
  template: `
    <input type="text" [(ngModel)]="data">
    <br>
    <app-child [inputData]="data" [modelData]="data"></app-child>
  `
})
export class AppComponent {
  data: string = "";
}

Ekstra bilgi olarak; model inputs özelliğinin değeri belirtilmediği sürece undifined kabul edilecektir. Ayrıca required metodu sayesinde ilgili değişken parent component’te zorunlu kılınabilmektedir.