Angular 17.1 – Input Signals

Merhaba,

Bu içeriğimizde, Angular mimarisinin 17.1 sürümünde gelmiş olan ve Input decorator’ının davranışını signal olarak da uygulamamızı sağlayacak olan Input Signals özelliğini kısaca inceliyor olacağız.

Input Signals, geleneksel decorator yaklaşımına nazaran yeni bir signal tabanlı alternatiftir.

Evet, Input Signals özelliği sayesinde @angular/core path’i altında bulunan input() fonksiyonu aracılığıyla componentimizde bir input değeri oluşturulabilmekte ve bu davranışın getirisi olan türlü avantajlardan istifade edebilmekteyiz. Öncelikle gelen bu yeni özelliği bir örnekle ele alarak başlayalım;

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

@Component({
  selector: 'app-child1',
  standalone: true,
  template: `
  Child1 Component {{data()}}
  `
})
export class Child1Component {
  data = input();
}

Yukarıdaki örnek kod bloğuna göz atarsanız eğer input() fonksiyonu eşliğinde bir reaktif davranış sergileyen input değeri tanımlanmıştır. Bu değer artık özünde bir signal olduğu için html kısmında kullanılırken bir fonksiyonvari şeklinde, parantezler eşliğinde kullanıldığına dikkatinizi çekerim. Ayrıca alternatif olarak input() fonksiyonunu aşağıdaki varyasyonlardaki gibi de kullanabileceğimizi söylemekte fayda görmekteyim;

export class Child1Component {
  data = input<string>();
}

export class Child1Component {
  data = input<string>("initial value");
}

Velhasıl kelam, görüldüğü üzere bu component’i selector üzerinden referans edecek olan herhangi bir component’ten gönderilebilecek bir signal yapısında input değeri oluşturmuş bulunuyoruz. İstek doğrultusunda bunun kullanımı aşağıdaki gibi olacaktır…

import { Component } from '@angular/core';
import { Child1Component } from './child1/child1.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Child1Component],
  template: `
    <app-child1 [data]="data"></app-child1>
  `
})
export class AppComponent {
  data: string = "..value..";
}

Ayrıca bu input değeri üzerinde aşağıdaki gibi ekstradan işlemlerde gerçekleştirilebilmektedir.

• required
  Eğer ki input değeri zorunlu kılınacaksa required fonksiyonu aşağıdaki gibi kullanılabilir.

  data = input.required();
  

  ya da

  data = input.required<string>();
  

  Bu işlem neticesinde parent component’te bu input’a değeri verilmediği sürece aşağıdaki görseldeki gibi hata alınacaktır;

• alias
  Bu signal input değerine bir alias verilerek de kullanılabilir.

    data = input("initial value", {
      alias: "dataAlias"
    });
  

  Eğer ki bu şekilde alias kullanımı tercih ediliyorsa o taktirde parent component’te de kullanılması mecburidir.

  .
  .
  .
    template: `
      <app-child1 [dataAlias]="data"></app-child1>
    `
  })
  export class AppComponent {
    data: string = "..value..";
  }
  

• transform
  Ayrıca input değerini parse edebilecek aşağıdaki gibi bir transform’da tanımlanabilir.

    data = input("initial value", {
      alias: "dataAlias",
      transform: (value: string) => value + "asd"
    });
  

• Component Input Binding
  Ve son olarak da Input Signals özelliği component input binding süreçlerinde de kullanılabilir.

      providers: [
          provideRouter([
              { path: "child1/:data", component: Child1Component },
              { path: "child2", component: Child2Component }
          ], withComponentInputBinding())
      ]
  

Tabi bu Input Signals özelliğinin avantaj açısından getirisi nedir diye soracak olursanız ngOnChanges event’ine nazaran computed ile daha modern bir çalışma yapmamıza olanak tanımasıdır diyebiliriz. Bunun için aşağıdaki örneği incelemeniz yeterli olacaktır kanaatindeyim;

.
.
.
  template: `
  <div [innerHTML]="imageUrl()"></div>
  `
})
export class ProfileComponent {
  profileNo = input<number>();
  imageUrl = computed(() => `<img src="https://randomuser.me/api/portraits/men/${this.profileNo()}.jpg">`)
}

Nihai olarak;
Angular mimarisi signal yapılanmaları üzerine oldukça odaklanmakta ve görülmektedir ki geleceği bu teknoloji temellerine göre planlamaktadır. Haliyle bu içeriğimizde de, bu vizyonda atılmış olan bir adımı daha incelemiş ve Input Signal özelliğini masaya yatırmış bulunuyoruz.

İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…