<\/div>\n

Merhaba,<\/p>\n

Bu i\u00e7eri\u011fimizde Angular 17.2 versiyonuyla gelen ve bir di\u011fer Signal API’si olan Model Inputs<\/em> \u00f6zelli\u011fini inceleyecek ve Angular 17.1 ile gelmi\u015f olan \u00f6nceki yaz\u0131lar\u0131m\u0131zda de\u011ferlendirmi\u015f oldu\u011fumuz Input Signals<\/a> \u00f6zelli\u011fiyle kar\u015f\u0131la\u015ft\u0131rmas\u0131n\u0131 yap\u0131yor olaca\u011f\u0131z.<\/p>\n

\u0130lk olarak input signals \u00f6zelli\u011finin read only bir davran\u0131\u015f sergiledi\u011finden bahsederek girizgahta bulunal\u0131m istiyorum. Yani alttaki \u00f6rnek kod blo\u011funu ele al\u0131rsak e\u011fer;<\/p>\n

\n
\r\n@Component({\r\n selector: 'app-child',\r\n standalone: true,\r\n template: `\r\n Child <br>\r\n Input Data : {{inputData()}} <br>\r\n <button (click)="toggle()">Toggle<\/button>\r\n `\r\n})\r\nexport class ChildComponent {\r\n inputData = input();\r\n\r\n toggle() {\r\n\r\n }\r\n}\r\n<\/pre>\n<\/div>\n
‘inputData’ ad\u0131yla tan\u0131mlanm\u0131\u015f olan signal input de\u011fi\u015fkeni ya initial value olarak ya da parent component arac\u0131l\u0131\u011f\u0131yla doldurulabilmekte lakin read only oldu\u011fu i\u00e7in bir daha bir de\u011fer set edilememektedir.<\/p>\n
Ha tabi ki de istisna olarak two-way data-binding \u00f6zelli\u011fi kullan\u0131larak de\u011feri a\u015fa\u011f\u0131daki gibi g\u00fcncellenebilmektedir.<\/p>\n
\n
\r\n@Component({\r\n selector: 'app-root',\r\n standalone: true,\r\n imports: [RouterOutlet, NgOptimizedImage, ChildComponent, FormsModule],\r\n template: `\r\n <input type="text" [(ngModel)]="data">\r\n <br>\r\n <app-child [inputData]="data"><\/app-child>\r\n `\r\n})\r\nexport class AppComponent {\r\n data: string = "";\r\n}\r\n<\/pre>\n<\/div>\n
$\"Angular$ <\/a>Model Input de\u011fi\u015fkeni ise benzer ama\u00e7larla kullan\u0131labilen, writable olan ve input\/output olarak davran\u0131\u015f sergileyen bir signal yap\u0131lanmas\u0131d\u0131r.<\/p>\n
\n
\r\n@Component({\r\n selector: 'app-child',\r\n standalone: true,\r\n template: `\r\n Child <br>\r\n Input Data : {{inputData()}} <br>\r\n Model Data : {{modelData()}} <br>\r\n <button (click)="toggle()">Toggle<\/button>\r\n `\r\n})\r\nexport class ChildComponent {\r\n inputData = input();\r\n modelData = model();\r\n\r\n toggle() {\r\n this.modelData.set("Model data changed");\r\n }\r\n}\r\n<\/pre>\n<\/div>\n
Yukar\u0131daki \u00f6rnek kod blo\u011fundan da anla\u015f\u0131laca\u011f\u0131 \u00fczere ilk de\u011fer inital value olarak verilebilece\u011fi gibi parent component’ten de al\u0131nabilmekte ya da set fonksiyonuyla mevcut de\u011feri de\u011fi\u015ftirilebilmektedir.<\/p>\n
Ve bu model input \u00f6zelli\u011fi de beklenildi\u011fi \u00fczere two-way data-binding davran\u0131\u015f\u0131ndan istifade edebilmektedir.<\/p>\n
\n
\r\n@Component({\r\n selector: 'app-root',\r\n standalone: true,\r\n imports: [RouterOutlet, NgOptimizedImage, ChildComponent, FormsModule],\r\n template: `\r\n <input type="text" [(ngModel)]="data">\r\n <br>\r\n <app-child [inputData]="data" [modelData]="data"><\/app-child>\r\n `\r\n})\r\nexport class AppComponent {\r\n data: string = "";\r\n}\r\n<\/pre>\n<\/div>\n
$\"Angular$ <\/a>Ekstra bilgi olarak; model inputs \u00f6zelli\u011finin de\u011feri belirtilmedi\u011fi s\u00fcrece undifined<\/code> kabul edilecektir. Ayr\u0131ca required<\/code> metodu sayesinde ilgili de\u011fi\u015fken parent component’te zorunlu k\u0131l\u0131nabilmektedir.<\/p>\n
\n\r\n modelData = model.required();\r\n<\/pre>\n<\/div>\n\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle… \nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere… \n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":" Merhaba, Bu i\u00e7eri\u011fimizde Angular 17.2 versiyonuyla gelen ve bir di\u011fer Signal API’si olan Model Inputs \u00f6zelli\u011fini inceleyecek ve Angular 17.1 ile gelmi\u015f olan \u00f6nceki yaz\u0131lar\u0131m\u0131zda de\u011ferlendirmi\u015f oldu\u011fumuz Input Signals \u00f6zelli\u011fiyle kar\u015f\u0131la\u015ft\u0131rmas\u0131n\u0131 yap\u0131yor olaca\u011f\u0131z. \u0130lk...<\/p>\n","protected":false},"author":1,"featured_media":26698,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420,5016],"tags":[2156,4960,5017,5018,5019],"class_list":["post-26896","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-angular-17-2","tag-angular","tag-angular-17","tag-angular-17-2","tag-angular-model-inputs","tag-model-inputs"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/26896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=26896"}],"version-history":[{"count":4,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/26896\/revisions"}],"predecessor-version":[{"id":26905,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/26896\/revisions\/26905"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/26698"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=26896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=26896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=26896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}