{"id":43431,"date":"2026-07-18T17:00:49","date_gmt":"2026-07-18T14:00:49","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=43431"},"modified":"2026-07-18T17:00:49","modified_gmt":"2026-07-18T14:00:49","slug":"angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/","title":{"rendered":"Angular’da Bile\u015fen Etkile\u015fimi: @Input() Dekorasyonu ile Veri Ak\u0131\u015f\u0131"},"content":{"rendered":"

Angular’da Bile\u015fen Etkile\u015fimi: @Input()<\/code> Dekorasyonu ile Veri Ak\u0131\u015f\u0131<\/h2>\n

Angular uygulamalar\u0131, k\u00fc\u00e7\u00fck, yeniden kullan\u0131labilir ve ba\u011f\u0131ms\u0131z bile\u015fenlerden olu\u015fan bir a\u011f \u00fczerine kuruludur. Bu bile\u015fenlerin tek ba\u015flar\u0131na i\u015flevsel olmalar\u0131 yetmez; ayn\u0131 zamanda birbirleriyle etkile\u015fime girmeleri, veri al\u0131\u015fveri\u015finde bulunmalar\u0131 ve uygulaman\u0131n genel mant\u0131\u011f\u0131n\u0131 olu\u015fturmak i\u00e7in i\u015fbirli\u011fi yapmalar\u0131 gerekir. Bu etkile\u015fimin temel ta\u015flar\u0131ndan biri, \u00fcst bile\u015fenden (parent component) alt bile\u015fene (child component) veri aktar\u0131m\u0131n\u0131 sa\u011flayan @Input()<\/code> dekorasyonudur. Bu makalede, Angular’da @Input()<\/code> kullan\u0131m\u0131n\u0131, detaylar\u0131n\u0131, ilgili ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131n\u0131, de\u011fi\u015fim alg\u0131lama mekanizmalar\u0131n\u0131 ve en iyi uygulamalar\u0131 derinlemesine inceleyece\u011fiz.<\/p>\n

Bile\u015fen Etkile\u015fimi Neden \u00d6nemlidir?<\/h3>\n

Modern web uygulamalar\u0131 genellikle karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczlerine ve i\u015f mant\u0131\u011f\u0131na sahiptir. Bu karma\u015f\u0131kl\u0131\u011f\u0131 y\u00f6netmek i\u00e7in, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerini soyutlamak ve her birini ayr\u0131, y\u00f6netilebilir bir birim olarak ele almak esast\u0131r. Angular bile\u015fenleri bu soyutlamay\u0131 sa\u011flar. Ancak, bu ba\u011f\u0131ms\u0131z birimler \u00e7o\u011fu zaman birbirlerinin verilerine veya durumlar\u0131na ihtiya\u00e7 duyarlar. \u00d6rne\u011fin, bir “\u00fcr\u00fcn listesi” bile\u015feni, her bir \u00fcr\u00fcn\u00fc g\u00f6stermek i\u00e7in bir “\u00fcr\u00fcn kart\u0131” bile\u015fenini kullanabilir. “\u00dcr\u00fcn listesi” bile\u015feni, hangi \u00fcr\u00fcn\u00fcn g\u00f6sterilece\u011fini “\u00fcr\u00fcn kart\u0131” bile\u015fenine bildirmelidir. \u0130\u015fte tam bu noktada, bile\u015fenler aras\u0131 veri ak\u0131\u015f\u0131 devreye girer.<\/p>\n

Angular’da bile\u015fenler aras\u0131 ileti\u015fim genellikle iki ana y\u00f6nde ger\u00e7ekle\u015fir:
\n1. \u00dcstten Alta (Parent to Child):<\/strong> \u00dcst bile\u015fen, alt bile\u015fenin davran\u0131\u015f\u0131n\u0131 veya i\u00e7eri\u011fini etkilemek i\u00e7in ona veri g\u00f6nderir. Bu, @Input()<\/code> dekorasyonu ile sa\u011flan\u0131r.
\n2. Alttan \u00dcste (Child to Parent):<\/strong> Alt bile\u015fen, \u00fcst bile\u015fene bir olay\u0131n ger\u00e7ekle\u015fti\u011fini veya verinin de\u011fi\u015fti\u011fini bildirmek ister. Bu, @Output()<\/code> dekorasyonu ve EventEmitter<\/code> ile sa\u011flan\u0131r.<\/p>\n

Bu makalede odak noktam\u0131z, \u00fcstten alta veri ak\u0131\u015f\u0131n\u0131 sa\u011flayan @Input()<\/code> olacakt\u0131r.<\/p>\n

@Input()<\/code> Dekorasyonunun Temelleri<\/h3>\n

@Input()<\/code> dekorasyonu, bir alt bile\u015fenin \u00fcst bile\u015fenden veri alabilmesini sa\u011flayan bir mekanizmad\u0131r. Alt bile\u015fende bir \u00f6zelli\u011fi @Input()<\/code> olarak i\u015faretledi\u011finizde, bu \u00f6zellik d\u0131\u015far\u0131dan, yani o alt bile\u015feni kullanan \u00fcst bile\u015fenden de\u011fer alabilir hale gelir.<\/p>\n

Basit Kullan\u0131m<\/h4>\n

Bir ChildComponent<\/code>‘in veri<\/code> ad\u0131nda bir @Input()<\/code> \u00f6zelli\u011fine sahip oldu\u011funu varsayal\u0131m:<\/p>\n

\/\/ child.component.ts\nimport { Component, Input } from '@angular\/core';\n\n@Component({\n  selector: 'app-child',\n  template: \n    <p>\u00dcst bile\u015fenden gelen veri: {{ veri }}<\/p>\n  <\/code>,\n  standalone: true\n})\nexport class ChildComponent {\n  @Input() veri: string = ''; \/\/ 'veri' \u00f6zelli\u011fi d\u0131\u015far\u0131dan al\u0131nabilir\n}<\/code><\/pre>\n
Bu ChildComponent<\/code>‘i bir ParentComponent<\/code> i\u00e7inde kullanmak i\u00e7in:<\/p>\n
\/\/ parent.component.ts\nimport { Component } from '@angular\/core';\nimport { ChildComponent } from '.\/child.component'; \/\/ ChildComponent'i import et\n\n@Component({\n  selector: 'app-parent',\n  template: \n    <h2>Parent Component<\/h2>\n    <app-child [veri]="parentVerisi"><\/app-child>\n    <button (click)="degistirVeri()">Veriyi De\u011fi\u015ftir<\/button>\n  <\/code>,\n  standalone: true,\n  imports: [ChildComponent] \/\/ ChildComponent'i kullanmak i\u00e7in import et\n})\nexport class ParentComponent {\n  parentVerisi: string = 'Merhaba D\u00fcnya!';\n\n  degistirVeri() {\n    this.parentVerisi = 'Yeni Mesaj: ' + new Date().toLocaleTimeString();\n  }\n}<\/code><\/pre>\n
Yukar\u0131daki \u00f6rnekte:
\n*   ChildComponent<\/code> i\u00e7indeki veri<\/code> \u00f6zelli\u011fi @Input()<\/code> ile i\u015faretlenmi\u015ftir.
\n*   ParentComponent<\/code>, app-child<\/code> etiketini kullanarak ChildComponent<\/code>‘i \u015fablonuna ekler.
\n*   [veri]=\"parentVerisi\"<\/code> syntax’\u0131, ParentComponent<\/code>‘teki parentVerisi<\/code> de\u011fi\u015fkeninin de\u011ferini ChildComponent<\/code>‘teki veri<\/code> @Input()<\/code> \u00f6zelli\u011fine ba\u011flar. K\u00f6\u015feli parantezler []<\/code>, tek y\u00f6nl\u00fc veri ba\u011flamay\u0131 (one-way data binding) g\u00f6sterir ve parentVerisi<\/code>‘nin de\u011ferinin veri<\/code>‘ye atand\u0131\u011f\u0131 anlam\u0131na gelir.<\/p>\n
Farkl\u0131 Veri Tipleriyle \u00c7al\u0131\u015fma<\/h4>\n
@Input()<\/code> sadece string de\u011fil, her t\u00fcrl\u00fc JavaScript veri tipini (say\u0131lar, boolean’lar, nesneler, diziler) alabilir.<\/p>\n
\/\/ child.component.ts\nimport { Component, Input } from '@angular\/core';\n\ninterface Urun {\n  id: number;\n  ad: string;\n  fiyat: number;\n}\n\n@Component({\n  selector: 'app-child',\n  template: \n    <div *ngIf="urun">\n      <h3>\u00dcr\u00fcn Bilgisi<\/h3>\n      <p>ID: {{ urun.id }}<\/p>\n      <p>Ad: {{ urun.ad }}<\/p>\n      <p>Fiyat: {{ urun.fiyat | currency:'USD':'symbol':'1.2-2' }}<\/p>\n    <\/div>\n    <div *ngIf="sayilar && sayilar.length > 0">\n      <h3>Say\u0131lar<\/h3>\n      <ul>\n        <li *ngFor="let s of sayilar">{{ s }}<\/li>\n      <\/ul>\n    <\/div>\n    <p>Aktif Mi: {{ aktifMi ? 'Evet' : 'Hay\u0131r' }}<\/p>\n  <\/code>,\n  standalone: true\n})\nexport class ChildComponent {\n  @Input() urun?: Urun;\n  @Input() sayilar?: number[];\n  @Input() aktifMi: boolean = false;\n}<\/code><\/pre>\n
ParentComponent<\/code>‘ten bu de\u011ferleri g\u00f6ndermek:<\/p>\n
\/\/ parent.component.ts\nimport { Component } from '@angular\/core';\nimport { CommonModule } from '@angular\/common'; \/\/ ngIf ve <\/em>ngFor i\u00e7in\nimport { ChildComponent } from '.\/child.component';\n\ninterface Urun {\n  id: number;\n  ad: string;\n  fiyat: number;\n}\n\n@Component({\n  selector: 'app-parent',\n  template: \n    <h2>Parent Component<\/h2>\n    <app-child\n      [urun]="seciliUrun"\n      [sayilar]="listeSayilar"\n      [aktifMi]="isAktif"\n    ><\/app-child>\n\n    <button (click)="degistirUrun()">\u00dcr\u00fcn\u00fc De\u011fi\u015ftir<\/button>\n    <button (click)="degistirSayilar()">Say\u0131lar\u0131 De\u011fi\u015ftir<\/button>\n    <button (click)="toggleAktif()">Aktif Durumu De\u011fi\u015ftir<\/button>\n  <\/code>,\n  standalone: true,\n  imports: [CommonModule, ChildComponent]\n})\nexport class ParentComponent {\n  seciliUrun: Urun = { id: 1, ad: 'Laptop', fiyat: 1200 };\n  listeSayilar: number[] = [10, 20, 30];\n  isAktif: boolean = true;\n\n  degistirUrun() {\n    this.seciliUrun = { id: 2, ad: 'Mouse', fiyat: 25 };\n  }\n\n  degistirSayilar() {\n    this.listeSayilar = [40, 50, 60, 70]; \/\/ Yeni bir dizi referans\u0131 olu\u015fturmak \u00f6nemli\n  }\n\n  toggleAktif() {\n    this.isAktif = !this.isAktif;\n  }\n}<\/code><\/pre>\n
Input Alias (Takma Ad) Kullan\u0131m\u0131<\/h4>\n
Bazen, alt bile\u015fendeki @Input()<\/code> \u00f6zelli\u011finin ad\u0131n\u0131n, \u00fcst bile\u015fenin \u015fablonunda kullan\u0131lan ad\u0131ndan farkl\u0131 olmas\u0131n\u0131 isteyebilirsiniz. Bu, isim \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nlemek veya daha okunabilir bir \u015fablon olu\u015fturmak i\u00e7in faydal\u0131 olabilir. @Input()<\/code> dekorasyonuna bir string arg\u00fcman ge\u00e7irerek takma ad tan\u0131mlayabilirsiniz:<\/p>\n
\/\/ child.component.ts\nimport { Component, Input } from '@angular\/core';\n\n@Component({\n  selector: 'app-child',\n  template: \n    <p>Gelen Ba\u015fl\u0131k: {{ baslik }}<\/p>\n  <\/code>,\n  standalone: true\n})\nexport class ChildComponent {\n  @Input('disaridanGelenBaslik') baslik: string = ''; \/\/ 'disaridanGelenBaslik' takma ad\u0131n\u0131 kullan\u0131r\n}<\/code><\/pre>\n
ParentComponent<\/code> i\u00e7inde kullan\u0131m:<\/p>\n
\/\/ parent.component.ts\nimport { Component } from '@angular\/core';\nimport { ChildComponent } from '.\/child.component';\n\n@Component({\n  selector: 'app-parent',\n  template: \n    <h2>Parent Component<\/h2>\n    <app-child [disaridanGelenBaslik]="'Uygulama Ba\u015fl\u0131\u011f\u0131'"><\/app-child>\n  <\/code>,\n  standalone: true,\n  imports: [ChildComponent]\n})\nexport class ParentComponent {\n  \/\/ ...\n}<\/code><\/pre>\n
Burada, ChildComponent<\/code> i\u00e7inde baslik<\/code> ad\u0131nda bir \u00f6zellik olmas\u0131na ra\u011fmen, ParentComponent<\/code> onu [disaridanGelenBaslik]<\/code> olarak kullan\u0131r.<\/p>\n
Inputlara Varsay\u0131lan De\u011ferler Atama<\/h4>\n
Bir @Input()<\/code> \u00f6zelli\u011fine varsay\u0131lan bir de\u011fer atamak olduk\u00e7a yayg\u0131n bir senaryodur. Bu, \u00fcst bile\u015fen bir de\u011fer sa\u011flamazsa, alt bile\u015fenin yine de anlaml\u0131 bir ba\u015flang\u0131\u00e7 de\u011ferine sahip olmas\u0131n\u0131 sa\u011flar.<\/p>\n
\/\/ child.component.ts\nimport { Component, Input } from '@angular\/core';\n\n@Component({\n  selector: 'app-child',\n  template: \n    <p>Mesaj: {{ mesaj }}<\/p>\n  <\/code>,\n  standalone: true\n})\nexport class ChildComponent {\n  @Input() mesaj: string = 'Varsay\u0131lan Mesaj'; \/\/ Varsay\u0131lan de\u011fer atand\u0131\n}<\/code><\/pre>\n
E\u011fer ParentComponent<\/code> mesaj<\/code> input’una bir de\u011fer atamazsa, ChildComponent<\/code> “Varsay\u0131lan Mesaj” g\u00f6sterecektir. E\u011fer atarsa, atanan de\u011fer kullan\u0131lacakt\u0131r.<\/p>\n
@Input()<\/code> ile \u0130lgili Ya\u015fam D\u00f6ng\u00fcs\u00fc Kancalar\u0131<\/h3>\n
Angular bile\u015fenlerinin, ya\u015fam d\u00f6ng\u00fcleri boyunca belirli anlarda tetiklenen kancalar\u0131 vard\u0131r. @Input()<\/code> ile etkile\u015fimde olan iki \u00f6nemli ya\u015fam d\u00f6ng\u00fcs\u00fc kancas\u0131 ngOnChanges<\/code> ve ngOnInit<\/code>‘tir.<\/p>\n
ngOnChanges<\/code><\/h4>\n
ngOnChanges<\/code> kancas\u0131, bile\u015fenin @Input()<\/code> \u00f6zellikleri ilk kez ayarland\u0131\u011f\u0131nda ve daha sonra bu \u00f6zelliklerden herhangi biri de\u011fi\u015fti\u011finde \u00e7a\u011fr\u0131l\u0131r. Bu kanca, de\u011fi\u015fiklikleri izlemek ve bunlara tepki vermek i\u00e7in ideal bir yerdir.<\/p>\n
ngOnChanges<\/code> metoduna SimpleChanges<\/code> tipinde bir arg\u00fcman gelir. Bu obje, de\u011fi\u015fen her @Input()<\/code> \u00f6zelli\u011fi i\u00e7in anahtar-de\u011fer \u00e7iftleri i\u00e7erir. Her de\u011fer, SimpleChange<\/code> tipinde bir objedir ve previousValue<\/code>, currentValue<\/code> ve firstChange<\/code> (ilk de\u011fi\u015fiklik mi?) \u00f6zelliklerini bar\u0131nd\u0131r\u0131r.<\/p>\n
\/\/ child.component.ts\nimport { Component, Input, OnChanges, SimpleChanges } from '@angular\/core';\n\n@Component({\n  selector: 'app-child',\n  template: \n    <p>Gelen Say\u0131: {{ gelenSayi }}<\/p>\n    <p>Gelen Metin: {{ gelenMetin }}<\/p>\n  <\/code>,\n  standalone: true\n})\nexport class ChildComponent implements OnChanges {\n  @Input() gelenSayi: number = 0;\n  @Input() gelenMetin: string = '';\n\n  ngOnChanges(changes: SimpleChanges): void {\n    console.log('ngOnChanges tetiklendi:', changes);\n    if (changes['gelenSayi']) {\n      console.log('gelenSayi de\u011fi\u015fti. \u00d6nceki:', changes['gelenSayi'].previousValue, 'Yeni:', changes['gelenSayi'].currentValue);\n    }\n    if (changes['gelenMetin'] && changes['gelenMetin'].firstChange) {\n      console.log('gelenMetin ilk kez ayarland\u0131.');\n    }\n  }\n}<\/code><\/pre>\n
ngOnChanges<\/code>‘in \u00f6nemli \u00f6zellikleri:
\n*   Birden Fazla Input:<\/strong> Birden fazla @Input()<\/code> \u00f6zelli\u011fi de\u011fi\u015firse, ngOnChanges<\/code> tek bir seferde \u00e7a\u011fr\u0131l\u0131r ve changes<\/code> objesi t\u00fcm de\u011fi\u015fen inputlar\u0131 i\u00e7erir.
\n*   Referans De\u011fi\u015fiklikleri:<\/strong> ngOnChanges<\/code>, sadece input de\u011ferlerinin referans\u0131 de\u011fi\u015fti\u011finde tetiklenir. Nesneler veya diziler i\u00e7in, e\u011fer objenin i\u00e7indeki bir \u00f6zellik de\u011fi\u015fir ancak objenin referans\u0131 ayn\u0131 kal\u0131rsa, ngOnChanges<\/code> tetiklenmez. Bu, de\u011fi\u015fim alg\u0131lama mekanizmas\u0131n\u0131n temel bir \u00f6zelli\u011fidir ve performans i\u00e7in \u00f6nemlidir.<\/p>\n
ngOnInit<\/code><\/h4>\n
ngOnInit<\/code> kancas\u0131, bile\u015fen ilk kez ba\u015flat\u0131ld\u0131\u011f\u0131nda, yani t\u00fcm @Input()<\/code> \u00f6zellikleri ayarland\u0131ktan sonra<\/em> bir kez \u00e7a\u011fr\u0131l\u0131r. Bu, bile\u015fenin ba\u015flang\u0131\u00e7 durumunu ayarlamak veya @Input()<\/code> de\u011ferlerine dayal\u0131 ilk hesaplamalar\u0131 yapmak i\u00e7in uygun bir yerdir.<\/p>\n
ngOnInit<\/code> ve ngOnChanges<\/code> aras\u0131ndaki temel fark:
\n*   ngOnChanges<\/code>: Bile\u015fen olu\u015fturuldu\u011funda ve @Input()<\/code> de\u011ferleri her de\u011fi\u015fti\u011finde \u00e7a\u011fr\u0131l\u0131r. changes<\/code> objesi ile \u00f6nceki ve yeni de\u011ferlere eri\u015fim sa\u011flar.
\n   ngOnInit<\/code>: Bile\u015fen olu\u015fturuldu\u011funda, @Input()<\/code> de\u011ferleri ayarland\u0131ktan <\/em>sonra* sadece bir kez \u00e7a\u011fr\u0131l\u0131r. Bu noktada, t\u00fcm input de\u011ferleri zaten bile\u015fen \u00f6zelliklerine atanm\u0131\u015ft\u0131r.<\/p>\n
\/\/ child.component.ts\nimport { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular\/core';\n\n@Component({\n  selector: 'app-child',\n  template: \n    <p>Ba\u015flang\u0131\u00e7 Mesaj\u0131: {{ baslangicMesaji }}<\/p>\n    <p>Gelen Say\u0131: {{ gelenSayi }}<\/p>\n  <\/code>,\n  standalone: true\n})\nexport class ChildComponent implements OnChanges, OnInit {\n  @Input() gelenSayi: number = 0;\n  baslangicMesaji: string = '';\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes['gelenSayi']) {\n      console.log('ngOnChanges: gelenSayi de\u011fi\u015fti:', changes['gelenSayi'].currentValue);\n    }\n  }\n\n  ngOnInit(): void {\n    console.log('ngOnInit: Bile\u015fen ba\u015flat\u0131ld\u0131. gelenSayi:', this.gelenSayi);\n    this.baslangicMesaji = Bile\u015fen ${this.gelenSayi} de\u011feriyle ba\u015flat\u0131ld\u0131.<\/code>;\n  }\n}<\/code><\/pre>\n
Bu \u00f6rnekte, ngOnInit<\/code> i\u00e7inde this.gelenSayi<\/code>‘ye g\u00fcvenle eri\u015febiliriz \u00e7\u00fcnk\u00fc bu noktada @Input()<\/code> de\u011ferleri zaten atanm\u0131\u015f olacakt\u0131r.<\/p>\n
De\u011fi\u015fim Alg\u0131lama ve @Input()<\/code><\/h3>\n
Angular’\u0131n de\u011fi\u015fim alg\u0131lama mekanizmas\u0131, uygulaman\u0131n performans\u0131n\u0131 do\u011frudan etkiler. @Input()<\/code> ile veri ak\u0131\u015f\u0131 s\u0131ras\u0131nda de\u011fi\u015fim alg\u0131laman\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak kritik \u00f6neme sahiptir.<\/p>\n
Angular, varsay\u0131lan olarak “check every time” (her zaman kontrol et) stratejisini kullan\u0131r. Bu, herhangi bir olay (kullan\u0131c\u0131 etkile\u015fimi, HTTP iste\u011fi tamamlanmas\u0131, zamanlay\u0131c\u0131) tetiklendi\u011finde, Angular’\u0131n t\u00fcm bile\u015fen a\u011fac\u0131n\u0131 ba\u015ftan a\u015fa\u011f\u0131 kontrol ederek input’larda ve ba\u011fl\u0131 verilerde bir de\u011fi\u015fiklik olup olmad\u0131\u011f\u0131n\u0131 anlamaya \u00e7al\u0131\u015ft\u0131\u011f\u0131 anlam\u0131na gelir.<\/p>\n
Nesneler ve Dizilerde Referans De\u011fi\u015fikli\u011fi<\/h4>\n
Daha \u00f6nce de belirtildi\u011fi gibi, ngOnChanges<\/code> ve dolay\u0131s\u0131yla Angular’\u0131n de\u011fi\u015fim alg\u0131lama sistemi, nesneler ve diziler i\u00e7in referans de\u011fi\u015fikli\u011fini izler. E\u011fer bir nesnenin veya dizinin i\u00e7indeki bir \u00f6zellik de\u011fi\u015fir ancak nesnenin\/dizinin kendisinin bellekteki referans\u0131 de\u011fi\u015fmezse, Angular bunu bir de\u011fi\u015fiklik olarak alg\u0131lamaz ve ngOnChanges<\/code> tetiklenmez.<\/p>\n
\u00d6rnek:<\/p>\n
\/\/ parent.component.ts\n\/\/ ...\nexport class ParentComponent {\n  urunBilgisi = { ad: 'Klavye', fiyat: 50 };\n\n  degistirUrunFiyat() {\n    this.urunBilgisi.fiyat = 60; \/\/ NESNEN\u0130N REFERANSI DE\u011e\u0130\u015eMED\u0130!\n  }\n\n  degistirUrunReferans() {\n    this.urunBilgisi = { ...this.urunBilgisi, fiyat: 70 }; \/\/ Yeni bir nesne referans\u0131 olu\u015fturuldu\n  }\n}<\/code><\/pre>\n
ChildComponent<\/code>‘e [urun]=\"urunBilgisi\"<\/code> \u015feklinde g\u00f6nderildi\u011finde:
\n*   degistirUrunFiyat()<\/code> \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, ChildComponent<\/code>‘teki ngOnChanges<\/code> tetiklenmez. Angular, urunBilgisi<\/code>‘nin referans\u0131n\u0131n ayn\u0131 oldu\u011funu g\u00f6r\u00fcr.
\n*   degistirUrunReferans()<\/code> \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, ChildComponent<\/code>‘teki ngOnChanges<\/code> tetiklenir \u00e7\u00fcnk\u00fc urunBilgisi<\/code>‘ne yeni bir nesne referans\u0131 atanm\u0131\u015ft\u0131r.<\/p>\n
Bu nedenle, nesne ve dizi @Input()<\/code>‘lar\u0131n\u0131 g\u00fcncellerken de\u011fi\u015fmezlik (immutability)<\/strong> prensibini uygulamak \u00f6nemlidir. Yeni bir nesne veya dizi olu\u015fturarak (\u00f6rne\u011fin spread operat\u00f6r\u00fc ...<\/code> ile), Angular’\u0131n de\u011fi\u015fikli\u011fi alg\u0131lamas\u0131n\u0131 sa\u011flayabilirsiniz.<\/p>\n
OnPush<\/code> De\u011fi\u015fim Alg\u0131lama Stratejisi<\/h4>\n
Performans\u0131 optimize etmek i\u00e7in, bile\u015fenler ChangeDetectionStrategy.OnPush<\/code> kullanarak Angular’\u0131n de\u011fi\u015fim alg\u0131lama mekanizmas\u0131n\u0131 daha k\u0131s\u0131tl\u0131 hale getirebilirler. OnPush<\/code> stratejisiyle bir bile\u015fen, yaln\u0131zca a\u015fa\u011f\u0131daki durumlarda de\u011fi\u015fim alg\u0131lama d\u00f6ng\u00fcs\u00fcn\u00fc tetikler:
\n1.  Bile\u015fenin herhangi bir @Input()<\/code> \u00f6zelli\u011finin referans\u0131 de\u011fi\u015fti\u011finde.
\n2.  Bile\u015fenin kendisi veya \u015fablonundaki bir olay (click, submit vb.) tetiklendi\u011finde.
\n3.  Bile\u015fende bir async<\/code> pipe taraf\u0131ndan g\u00f6zlemlenen bir Observable yeni bir de\u011fer yayd\u0131\u011f\u0131nda.
\n4.  ChangeDetectorRef<\/code> servisi kullan\u0131larak manuel olarak de\u011fi\u015fim alg\u0131lama tetiklendi\u011finde (markForCheck()<\/code>, detectChanges()<\/code>).<\/p>\n
OnPush<\/code> stratejisini kullanmak, \u00f6zellikle \u00e7ok say\u0131da i\u00e7 i\u00e7e bile\u015feni olan b\u00fcy\u00fck uygulamalarda performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir. Ancak, @Input()<\/code> de\u011ferlerini g\u00fcncellerken de\u011fi\u015fmezlik kurallar\u0131na s\u0131k\u0131 s\u0131k\u0131ya uymay\u0131 gerektirir.<\/p>\n
\/\/ child.component.ts\nimport { Component, Input, OnChanges, SimpleChanges, ChangeDetectionStrategy } from '@angular\/core';\n\n@Component({\n  selector: 'app-child',\n  template: \n    <p>OnPush ile Gelen Say\u0131: {{ sayi }}<\/p>\n    <p>OnPush ile Gelen Obje Ad\u0131: {{ obje.ad }}<\/p>\n  <\/code>,\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush \/\/ OnPush stratejisi\n})\nexport class ChildComponent implements OnChanges {\n  @Input() sayi: number = 0;\n  @Input() obje: { ad: string } = { ad: '' };\n\n  ngOnChanges(changes: SimpleChanges): void {\n    console.log('OnPush ChildComponent ngOnChanges:', changes);\n  }\n}<\/code><\/pre>\n
ParentComponent<\/code>‘ten OnPush<\/code> bile\u015fenine veri g\u00f6nderirken:<\/p>\n
\/\/ parent.component.ts\n\/\/ ...\nexport class ParentComponent {\n  onPushSayi: number = 1;\n  onPushObje: { ad: string } = { ad: '\u0130lk Obje' };\n\n  degistirOnPushSayi() {\n    this.onPushSayi++; \/\/ Primitive de\u011fer de\u011fi\u015fti, OnPush tetikler\n  }\n\n  degistirOnPushObjeIci() {\n    this.onPushObje.ad = 'De\u011fi\u015fen Obje Ad\u0131'; \/\/ OnPush tetiklemez! Referans ayn\u0131.\n  }\n\n  degistirOnPushObjeReferans() {\n    this.onPushObje = { ...this.onPushObje, ad: 'Yeni Obje Referans\u0131' }; \/\/ OnPush tetikler! Yeni referans.\n  }\n}<\/code><\/pre>\n
degistirOnPushObjeIci()<\/code> metodu \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, ChildComponent<\/code>‘teki ngOnChanges<\/code> tetiklenmez ve \u015fablon g\u00fcncellenmez \u00e7\u00fcnk\u00fc onPushObje<\/code>‘nin referans\u0131 de\u011fi\u015fmemi\u015ftir. Bu, OnPush<\/code> stratejisinin temel bir k\u0131s\u0131tlamas\u0131d\u0131r.<\/p>\n
Geli\u015fmi\u015f @Input()<\/code> Kullan\u0131m Senaryolar\u0131<\/h3>\n
Input Setters\/Getters<\/h4>\n
@Input()<\/code> \u00f6zelliklerine setter<\/code> ve getter<\/code> metodlar\u0131 ekleyerek, input de\u011ferlerinin bile\u015fene atanmadan \u00f6nce veya bile\u015fenden okunurken i\u015flenmesini sa\u011flayabilirsiniz. Bu, de\u011ferleri d\u00f6n\u00fc\u015ft\u00fcrmek, do\u011frulamak veya yan etkileri tetiklemek i\u00e7in harika bir yoldur.<\/p>\n
\/\/ child.component.ts\nimport { Component, Input } from '@angular\/core';\n\n@Component({\n  selector: 'app-child',\n  template: \n    <p>\u0130\u015flenmi\u015f Ba\u015fl\u0131k: {{ _baslik }}<\/p>\n    <p>Do\u011frulanm\u0131\u015f Ya\u015f: {{ _yas }}<\/p>\n  <\/code>,\n  standalone: true\n})\nexport class ChildComponent {\n  _baslik: string = '';\n  _yas: number = 0;\n\n  @Input()\n  set baslik(value: string) {\n    \/\/ Ba\u015fl\u0131\u011f\u0131 her zaman b\u00fcy\u00fck harfe d\u00f6n\u00fc\u015ft\u00fcr\n    this._baslik = value ? value.toUpperCase() : 'BA\u015eLIK YOK';\n  }\n  get baslik(): string {\n    return this._baslik;\n  }\n\n  @Input()\n  set yas(value: number) {\n    \/\/ Ya\u015f\u0131 do\u011frula ve pozitif bir say\u0131 oldu\u011fundan emin ol\n    this._yas = value > 0 ? value : 0;\n    console.log('Ya\u015f input setter tetiklendi:', this._yas);\n  }\n  get yas(): number {\n    return this._yas;\n  }\n}<\/code><\/pre>\n
ParentComponent<\/code>‘ten kullan\u0131m:<\/p>\n
\/\/ parent.component.ts\nimport { Component } from '@angular\/core';\nimport { ChildComponent } from '.\/child.component';\n\n@Component({\n  selector: 'app-parent',\n  template: \n    <h2>Parent Component<\/h2>\n    <app-child [baslik]="'k\u00fc\u00e7\u00fck harfli ba\u015fl\u0131k'" [yas]="-5"><\/app-child>\n    <app-child [baslik]="'b\u00fcy\u00fck harfli ba\u015fl\u0131k'" [yas]="30"><\/app-child>\n  <\/code>,\n  standalone: true,\n  imports: [ChildComponent]\n})\nexport class ParentComponent {\n  \/\/ ...\n}<\/code><\/pre>\n
Bu \u00f6rnekte, baslik<\/code> input’u her zaman b\u00fcy\u00fck harfe d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr ve yas<\/code> input’u negatif bir de\u011fer girilse bile 0<\/code> olarak ayarlan\u0131r. Setter’lar, ngOnChanges<\/code>‘ten \u00f6nce tetiklenir ve bu nedenle ngOnChanges<\/code>‘te g\u00f6rece\u011finiz currentValue<\/code> zaten setter taraf\u0131ndan i\u015flenmi\u015f de\u011fer olacakt\u0131r.<\/p>\n
Dinamik Inputlar ve ng-template<\/code> ile \u0130\u00e7erik Projeksiyonu<\/h4>\n
Bazen bir bile\u015fenin sadece veri almakla kalmay\u0131p, ayn\u0131 zamanda \u00fcst bile\u015fenden bir \u015fablon veya HTML par\u00e7as\u0131 almas\u0131 gerekebilir. Bu, Angular’\u0131n i\u00e7erik projeksiyonu (content projection) \u00f6zelli\u011fiyle (<\/code>) veya daha dinamik olarak ng-template<\/code>‘i @Input()<\/code> olarak ge\u00e7irerek yap\u0131labilir.<\/p>\n
ng-template<\/code>‘i @Input()<\/code> olarak ge\u00e7irmek, alt bile\u015fenin ne t\u00fcr bir i\u00e7erik render edece\u011fini tam olarak kontrol etmesine olanak tan\u0131r ve ayn\u0131 zamanda \u00fcst bile\u015fene bu i\u00e7eri\u011fi \u00f6zelle\u015ftirme esnekli\u011fi sunar.<\/p>\n
\/\/ card.component.ts\nimport { Component, Input, TemplateRef } from '@angular\/core';\nimport { CommonModule } from '@angular\/common';\n\n@Component({\n  selector: 'app-card',\n  template: \n    <div class="card">\n      <div class="card-header">\n        <!-- Ba\u015fl\u0131k \u015fablonu varsa onu kullan, yoksa varsay\u0131lan ba\u015fl\u0131\u011f\u0131 g\u00f6ster -->\n        <ng-container *ngIf="headerTemplate; else defaultHeader">\n          <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: title, data: itemData }"><\/ng-container>\n        <\/ng-container>\n        <ng-template #defaultHeader>\n          <h3>{{ title }}<\/h3>\n        <\/ng-template>\n      <\/div>\n      <div class="card-body">\n        <!-- \u0130\u00e7erik \u015fablonu varsa onu kullan, yoksa varsay\u0131lan i\u00e7eri\u011fi g\u00f6ster -->\n        <ng-container *ngIf="bodyTemplate; else defaultBody">\n          <ng-container *ngTemplateOutlet="bodyTemplate; context: { $implicit: itemData }"><\/ng-container>\n        <\/ng-container>\n        <ng-template #defaultBody>\n          <p>Varsay\u0131lan Kart \u0130\u00e7eri\u011fi<\/p>\n          <p *ngIf="itemData">Veri: {{ itemData | json }}<\/p>\n        <\/ng-template>\n      <\/div>\n    <\/div>\n  <\/code>,\n  styles: [\n    .card { border: 1px solid #ccc; padding: 15px; margin: 10px; border-radius: 5px; }\n    .card-header { background-color: #f0f0f0; padding: 10px; border-bottom: 1px solid #eee; }\n    .card-body { padding: 10px; }\n  <\/code>],\n  standalone: true,\n  imports: [CommonModule]\n})\nexport class CardComponent {\n  @Input() title: string = 'Kart Ba\u015fl\u0131\u011f\u0131';\n  @Input() itemData: any; \/\/ \u0130\u00e7erik \u015fablonuna ge\u00e7ecek veri\n  @Input() headerTemplate?: TemplateRef<any>; \/\/ Ba\u015fl\u0131k i\u00e7in \u00f6zel \u015fablon\n  @Input() bodyTemplate?: TemplateRef<any>;   \/\/ \u0130\u00e7erik i\u00e7in \u00f6zel \u015fablon\n}<\/code><\/pre>\n
ParentComponent<\/code>‘ten bu CardComponent<\/code>‘i kullanmak:<\/p>\n
\/\/ parent.component.ts\nimport { Component } from '@angular\/core';\nimport { CardComponent } from '.\/card.component';\nimport { CommonModule } from '@angular\/common';\n\n@Component({\n  selector: 'app-parent',\n  template: \n    <h2>Parent Component - Template Input<\/h2>\n\n    <app-card\n      [title]="'\u00dcr\u00fcn Detay\u0131'"\n      [itemData]="{ name: 'Ak\u0131ll\u0131 Telefon', price: 999 }"\n      [headerTemplate]="customHeader"\n      [bodyTemplate]="productBodyTemplate"\n    ><\/app-card>\n\n    <app-card\n      [title]="'Basit Kart'"\n      [itemData]="{ message: 'Bu basit bir kartt\u0131r.' }"\n    ><\/app-card>\n\n    <!-- \u00d6zel ba\u015fl\u0131k \u015fablonu -->\n    <ng-template #customHeader let-title let-data="data">\n      <h3 style="color: blue;">\u00d6zel Ba\u015fl\u0131k: {{ title }} (ID: {{ data?.id || 'N\/A' }})<\/h3>\n    <\/ng-template>\n\n    <!-- \u00dcr\u00fcn detaylar\u0131 i\u00e7in \u00f6zel i\u00e7erik \u015fablonu -->\n    <ng-template #productBodyTemplate let-product>\n      <div style="background-color: #e6ffe6; padding: 5px;">\n        <p><strong>\u00dcr\u00fcn Ad\u0131:<\/strong> {{ product.name }}<\/p>\n        <p><strong>Fiyat:<\/strong> {{ product.price | currency:'USD' }}<\/p>\n      <\/div>\n    <\/ng-template>\n  <\/code>,\n  standalone: true,\n  imports: [CommonModule, CardComponent]\n})\nexport class ParentComponent {\n  \/\/ ...\n}<\/code><\/pre>\n
Bu \u00f6rnekte, CardComponent<\/code>‘e TemplateRef<\/code> tipinde headerTemplate<\/code> ve bodyTemplate<\/code> inputlar\u0131 tan\u0131mlanm\u0131\u015ft\u0131r. ParentComponent<\/code>, <\/code> etiketleri ile bu \u015fablonlar\u0131 olu\u015fturur ve CardComponent<\/code>‘e g\u00f6nderir. *ngTemplateOutlet<\/code> direktifi, bu \u015fablonlar\u0131 alt bile\u015fenin i\u00e7inde render etmek i\u00e7in kullan\u0131l\u0131r ve context<\/code> objesi ile \u015fablona veri aktar\u0131labilir.<\/p>\n
@Input()<\/code> Kullan\u0131m\u0131nda En \u0130yi Uygulamalar<\/h3>\n
1.  Tek Sorumluluk Prensibi (SRP):<\/strong> Bir bile\u015fenin @Input()<\/code> \u00f6zellikleri, o bile\u015fenin tek bir sorumlulu\u011funu yans\u0131tmal\u0131 ve a\u015f\u0131r\u0131ya ka\u00e7mamal\u0131d\u0131r. \u00c7ok fazla input, bile\u015fenin karma\u015f\u0131kla\u015ft\u0131\u011f\u0131n\u0131 ve muhtemelen birden fazla i\u015f yapt\u0131\u011f\u0131n\u0131 g\u00f6sterebilir.
\n2.  A\u00e7\u0131k ve Anlaml\u0131 \u0130simlendirme:<\/strong> @Input()<\/code> \u00f6zelliklerine ne anlama geldiklerini a\u00e7\u0131k\u00e7a belirten isimler verin. Takma adlar, \u00f6zellikle \u00e7ak\u0131\u015fmalar\u0131 \u00f6nlemek veya d\u0131\u015far\u0131dan daha sezgisel bir kullan\u0131m sa\u011flamak i\u00e7in faydal\u0131d\u0131r.
\n3.  Tip G\u00fcvenli\u011fi:<\/strong> TypeScript’in g\u00fcc\u00fcnden yararlan\u0131n. @Input()<\/code> \u00f6zelliklerine do\u011fru tipleri atay\u0131n. Karma\u015f\u0131k nesneler veya diziler i\u00e7in aray\u00fczler (interfaces) veya tipler (types) tan\u0131mlay\u0131n.<\/p>\n
interface User {\n      id: number;\n      name: string;\n      email: string;\n    }\n    @Input() user: User | undefined;<\/code><\/pre>\n
4.  De\u011fi\u015fmezlik (Immutability):<\/strong> \u00d6zellikle OnPush<\/code> de\u011fi\u015fim alg\u0131lama stratejisi kullan\u0131yorsan\u0131z, nesne ve dizi @Input()<\/code>‘lar\u0131n\u0131 g\u00fcncellerken her zaman yeni referanslar olu\u015fturun. Bu, Angular’\u0131n de\u011fi\u015fiklikleri do\u011fru bir \u015fekilde alg\u0131lamas\u0131n\u0131 sa\u011flar ve beklenmedik davran\u0131\u015flar\u0131 \u00f6nler.
\n5.  Varsay\u0131lan De\u011ferler:<\/strong> @Input()<\/code>‘lara varsay\u0131lan de\u011ferler atayarak bile\u015feninizi daha sa\u011flam hale getirin. Bu, \u00fcst bile\u015fenin bir de\u011fer sa\u011flamay\u0131 unuttu\u011fu durumlarda bile alt bile\u015fenin d\u00fczg\u00fcn \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.
\n6.  Gereksiz ngOnChanges<\/code> Kullan\u0131m\u0131ndan Ka\u00e7\u0131n\u0131n:<\/strong> ngOnChanges<\/code> g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r, ancak her input de\u011fi\u015fikli\u011finde pahal\u0131 i\u015flemler yapmak performans\u0131 d\u00fc\u015f\u00fcrebilir. Sadece ger\u00e7ekten ihtiya\u00e7 duydu\u011funuzda kullan\u0131n ve m\u00fcmk\u00fcnse ngOnInit<\/code> veya setter’lar\u0131 tercih edin.
\n7.  Dok\u00fcmantasyon:<\/strong> Bile\u015fenlerinizin @Input()<\/code> \u00f6zelliklerini net bir \u015fekilde belgeleyin. Hangi veriyi bekledi\u011fini, hangi tipleri kabul etti\u011fini ve iste\u011fe ba\u011fl\u0131 olup olmad\u0131\u011f\u0131n\u0131 a\u00e7\u0131klay\u0131n. Bu, di\u011fer geli\u015ftiricilerin (ve gelecekteki sizin) bile\u015fenlerinizi kolayca anlamas\u0131na ve kullanmas\u0131na yard\u0131mc\u0131 olur.
\n8.  Input Setter’lar\u0131 ile Do\u011frulama ve D\u00f6n\u00fc\u015ft\u00fcrme:<\/strong> Input de\u011ferlerini bile\u015feninize ula\u015fmadan \u00f6nce do\u011frulamak veya d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in setter’lar\u0131 kullan\u0131n. Bu, bile\u015feninizin i\u00e7 mant\u0131\u011f\u0131n\u0131 daha temiz tutar.
\n9.  Gereksiz @Input()<\/code> Kullan\u0131m\u0131ndan Ka\u00e7\u0131n\u0131n:<\/strong> E\u011fer bir veri sadece bir kez, bile\u015fen ba\u015flat\u0131l\u0131rken kullan\u0131l\u0131yorsa ve daha sonra de\u011fi\u015fmesi beklenmiyorsa, bazen bir servis arac\u0131l\u0131\u011f\u0131yla veya @Input()<\/code> yerine do\u011frudan bile\u015fenin kendi i\u00e7inde y\u00fcklenmesi daha uygun olabilir. Ancak bu, bile\u015fenin sorumluluklar\u0131na ve uygulaman\u0131n genel mimarisine ba\u011fl\u0131d\u0131r.<\/p>\n
Sonu\u00e7<\/h3>\n
Angular’da @Input()<\/code> dekorasyonu, bile\u015fenler aras\u0131 veri ak\u0131\u015f\u0131n\u0131n temel ve en yayg\u0131n kullan\u0131lan mekanizmalar\u0131ndan biridir. \u00dcst bile\u015fenden alt bile\u015fene veri g\u00f6nderme yetene\u011fi, mod\u00fcler ve yeniden kullan\u0131labilir bile\u015fenler olu\u015fturman\u0131n anahtar\u0131d\u0131r. @Input()<\/code>‘\u0131n basit kullan\u0131m\u0131ndan, ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131yla etkile\u015fimine, de\u011fi\u015fim alg\u0131lama stratejilerine ve geli\u015fmi\u015f senaryolara kadar geni\u015f bir yelpazeyi kapsayan bu mekanizmay\u0131 do\u011fru bir \u015fekilde anlamak ve uygulamak, Angular uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r. En iyi uygulamalar\u0131 takip ederek, temiz, verimli ve kolayca y\u00f6netilebilir Angular bile\u015fenleri geli\u015ftirebilirsiniz.<\/p>\n","protected":false},"excerpt":{"rendered":"Angular’da Bile\u015fen Etkile\u015fimi: @Input() Dekorasyonu ile Veri Ak\u0131\u015f\u0131 Angular uygulamalar\u0131, k\u00fc\u00e7\u00fck, yeniden kullan\u0131labilir ve ba\u011f\u0131ms\u0131z bile\u015fenlerden olu\u015fan bir a\u011f \u00fczerine kuruludur.","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1488],"tags":[],"class_list":{"0":"post-43431","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-angular","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nAngular'da Bile\u015fen Etkile\u015fimi: @Input() Dekorasyonu ile Veri Ak\u0131\u015f\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular'da Bile\u015fen Etkile\u015fimi: @Input() Dekorasyonu ile Veri Ak\u0131\u015f\u0131\" \/>\n<meta property=\"og:description\" content=\"Angular'da Bile\u015fen Etkile\u015fimi: @Input() Dekorasyonu ile Veri Ak\u0131\u015f\u0131 Angular uygulamalar\u0131, k\u00fc\u00e7\u00fck, yeniden kullan\u0131labilir ve ba\u011f\u0131ms\u0131z bile\u015fenlerden olu\u015fan bir a\u011f \u00fczerine kuruludur.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-18T14:00:49+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Angular’da Bile\u015fen Etkile\u015fimi: @Input() Dekorasyonu ile Veri Ak\u0131\u015f\u0131\",\"datePublished\":\"2026-07-18T14:00:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/\"},\"wordCount\":2125,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Angular\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/\",\"name\":\"Angular'da Bile\u015fen Etkile\u015fimi: @Input() Dekorasyonu ile Veri Ak\u0131\u015f\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-07-18T14:00:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular’da Bile\u015fen Etkile\u015fimi: @Input() Dekorasyonu ile Veri Ak\u0131\u015f\u0131\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular'da Bile\u015fen Etkile\u015fimi: @Input() Dekorasyonu ile Veri Ak\u0131\u015f\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/","og_locale":"tr_TR","og_type":"article","og_title":"Angular'da Bile\u015fen Etkile\u015fimi: @Input() Dekorasyonu ile Veri Ak\u0131\u015f\u0131","og_description":"Angular'da Bile\u015fen Etkile\u015fimi: @Input() Dekorasyonu ile Veri Ak\u0131\u015f\u0131 Angular uygulamalar\u0131, k\u00fc\u00e7\u00fck, yeniden kullan\u0131labilir ve ba\u011f\u0131ms\u0131z bile\u015fenlerden olu\u015fan bir a\u011f \u00fczerine kuruludur.","og_url":"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-07-18T14:00:49+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"19 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Angular’da Bile\u015fen Etkile\u015fimi: @Input() Dekorasyonu ile Veri Ak\u0131\u015f\u0131","datePublished":"2026-07-18T14:00:49+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/"},"wordCount":2125,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Angular"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/","url":"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/","name":"Angular'da Bile\u015fen Etkile\u015fimi: @Input() Dekorasyonu ile Veri Ak\u0131\u015f\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-07-18T14:00:49+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/angularda-bilesen-etkilesimi-input-dekorasyonu-ile-veri-akisi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular’da Bile\u015fen Etkile\u015fimi: @Input() Dekorasyonu ile Veri Ak\u0131\u015f\u0131"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=43431"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43431\/revisions"}],"predecessor-version":[{"id":43432,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43431\/revisions\/43432"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=43431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=43431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=43431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}