<\/div>\n

Merhaba,<\/p>\n

Bu i\u00e7eri\u011fimizde, Angular mimarisinin 17.1 s\u00fcr\u00fcm\u00fcnde gelmi\u015f olan ve Input decorator’\u0131n\u0131n davran\u0131\u015f\u0131n\u0131 signal<\/a> olarak da uygulamam\u0131z\u0131 sa\u011flayacak olan Input Signals<\/em> \u00f6zelli\u011fini k\u0131saca inceliyor olaca\u011f\u0131z.<\/p>\n

Input Signals, geleneksel decorator yakla\u015f\u0131m\u0131na nazaran yeni bir signal tabanl\u0131 alternatiftir.<\/em><\/p><\/blockquote>\n
Evet, Input Signals<\/em> \u00f6zelli\u011fi sayesinde @angular\/core<\/code> path’i alt\u0131nda bulunan input()<\/code> fonksiyonu arac\u0131l\u0131\u011f\u0131yla componentimizde bir input de\u011feri olu\u015fturulabilmekte ve bu davran\u0131\u015f\u0131n getirisi olan t\u00fcrl\u00fc avantajlardan istifade edebilmekteyiz. \u00d6ncelikle gelen bu yeni \u00f6zelli\u011fi bir \u00f6rnekle ele alarak ba\u015flayal\u0131m;<\/p>\n
\n\r\nimport { Component, input } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-child1',\r\n standalone: true,\r\n template: `\r\n Child1 Component {{data()}}\r\n `\r\n})\r\nexport class Child1Component {\r\n data = input();\r\n}\r\n<\/pre>\n<\/div>\n
Yukar\u0131daki \u00f6rnek kod blo\u011funa g\u00f6z atarsan\u0131z e\u011fer input()<\/code> fonksiyonu e\u015fli\u011finde bir reaktif davran\u0131\u015f sergileyen input de\u011feri tan\u0131mlanm\u0131\u015ft\u0131r. Bu de\u011fer art\u0131k \u00f6z\u00fcnde bir signal oldu\u011fu i\u00e7in html k\u0131sm\u0131nda kullan\u0131l\u0131rken bir fonksiyonvari \u015feklinde, parantezler e\u015fli\u011finde kullan\u0131ld\u0131\u011f\u0131na dikkatinizi \u00e7ekerim. Ayr\u0131ca alternatif olarak input()<\/code> fonksiyonunu a\u015fa\u011f\u0131daki varyasyonlardaki gibi de kullanabilece\u011fimizi s\u00f6ylemekte fayda g\u00f6rmekteyim;<\/p>\n
\n\r\nexport class Child1Component {\r\n data = input<string>();\r\n}\r\n<\/pre>\n<\/div>\n\n\r\nexport class Child1Component {\r\n data = input<string>("initial value");\r\n}\r\n<\/pre>\n<\/div>\nVelhas\u0131l kelam, g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere bu component’i selector \u00fczerinden referans edecek olan herhangi bir component’ten g\u00f6nderilebilecek bir signal yap\u0131s\u0131nda input de\u011feri olu\u015fturmu\u015f bulunuyoruz. \u0130stek do\u011frultusunda bunun kullan\u0131m\u0131 a\u015fa\u011f\u0131daki gibi olacakt\u0131r…<\/p>\n\n\r\nimport { Component } from '@angular\/core';\r\nimport { Child1Component } from '.\/child1\/child1.component';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n standalone: true,\r\n imports: [Child1Component],\r\n template: `\r\n <app-child1 [data]="data"><\/app-child1>\r\n `\r\n})\r\nexport class AppComponent {\r\n data: string = "..value..";\r\n}\r\n<\/pre>\n<\/div>\nAyr\u0131ca bu input de\u011feri \u00fczerinde a\u015fa\u011f\u0131daki gibi ekstradan i\u015flemlerde ger\u00e7ekle\u015ftirilebilmektedir.<\/p>\n\nrequired<\/em><\/strong> \nE\u011fer ki input de\u011feri zorunlu k\u0131l\u0131nacaksa required<\/code> fonksiyonu a\u015fa\u011f\u0131daki gibi kullan\u0131labilir.<\/p>\n\n\r\ndata = input.required();\r\n<\/pre>\n<\/div>\nya da<\/p>\n \n\r\ndata = input.required<string>();\r\n<\/pre>\n<\/div>\nBu i\u015flem neticesinde parent component’te bu input’a de\u011feri verilmedi\u011fi s\u00fcrece a\u015fa\u011f\u0131daki g\u00f6rseldeki gibi hata al\u0131nacakt\u0131r;<\/a>\n<\/li>\n alias<\/em><\/strong> \nBu signal input de\u011ferine bir alias verilerek de kullan\u0131labilir.<\/p>\n\n\r\n data = input("initial value", {\r\n alias: "dataAlias"\r\n });\r\n<\/pre>\n<\/div>\nE\u011fer ki bu \u015fekilde alias kullan\u0131m\u0131 tercih ediliyorsa o taktirde parent component’te de kullan\u0131lmas\u0131 mecburidir.<\/p>\n \n\r\n.\r\n.\r\n.\r\n template: `\r\n <app-child1 [dataAlias]="data"><\/app-child1>\r\n `\r\n})\r\nexport class AppComponent {\r\n data: string = "..value..";\r\n}\r\n<\/pre>\n<\/div>\n<\/li>\ntransform<\/em><\/strong> \nAyr\u0131ca input de\u011ferini parse edebilecek a\u015fa\u011f\u0131daki gibi bir transform’da tan\u0131mlanabilir.<\/p>\n\n\r\n data = input("initial value", {\r\n alias: "dataAlias",\r\n transform: (value: string) => value + "asd"\r\n });\r\n<\/pre>\n<\/div>\n<\/li>\nComponent Input Binding<\/em><\/strong> \nVe son olarak da Input Signals \u00f6zelli\u011fi component input binding s\u00fcre\u00e7lerinde de kullan\u0131labilir.<\/p>\n\n\r\n providers: [\r\n provideRouter([\r\n { path: "child1\/:data", component: Child1Component },\r\n { path: "child2", component: Child2Component }\r\n ], withComponentInputBinding())\r\n ]\r\n<\/pre>\n<\/div>\n<\/li>\n<\/ul>\nTabi bu Input Signals \u00f6zelli\u011finin avantaj a\u00e7\u0131s\u0131ndan getirisi nedir diye soracak olursan\u0131z ngOnChanges<\/code> event’ine nazaran computed<\/code> ile daha modern bir \u00e7al\u0131\u015fma yapmam\u0131za olanak tan\u0131mas\u0131d\u0131r diyebiliriz. Bunun i\u00e7in a\u015fa\u011f\u0131daki \u00f6rne\u011fi incelemeniz yeterli olacakt\u0131r kanaatindeyim;<\/p>\n \n\r\n.\r\n.\r\n.\r\n template: `\r\n <div [innerHTML]="imageUrl()"><\/div>\r\n `\r\n})\r\nexport class ProfileComponent {\r\n profileNo = input<number>();\r\n imageUrl = computed(() => `<img src="https:\/\/randomuser.me\/api\/portraits\/men\/${this.profileNo()}.jpg">`)\r\n}\r\n<\/pre>\n<\/div>\nNihai olarak; \nAngular mimarisi signal yap\u0131lanmalar\u0131 \u00fczerine olduk\u00e7a odaklanmakta ve g\u00f6r\u00fclmektedir ki gelece\u011fi bu teknoloji temellerine g\u00f6re planlamaktad\u0131r. Haliyle bu i\u00e7eri\u011fimizde de, bu vizyonda at\u0131lm\u0131\u015f olan bir ad\u0131m\u0131 daha incelemi\u015f ve Input Signal \u00f6zelli\u011fini masaya yat\u0131rm\u0131\u015f bulunuyoruz.<\/p>\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 mimarisinin 17.1 s\u00fcr\u00fcm\u00fcnde gelmi\u015f olan ve Input decorator’\u0131n\u0131n davran\u0131\u015f\u0131n\u0131 signal olarak da uygulamam\u0131z\u0131 sa\u011flayacak olan Input Signals \u00f6zelli\u011fini k\u0131saca inceliyor olaca\u011f\u0131z. Input Signals, geleneksel decorator yakla\u015f\u0131m\u0131na nazaran yeni bir signal...<\/p>\n","protected":false},"author":1,"featured_media":26698,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4958,5011],"tags":[2156,4960,5013,5012],"class_list":["post-26882","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-17","category-angular-17-1","tag-angular","tag-angular-17","tag-angular-17-1","tag-input-signals"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/26882","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=26882"}],"version-history":[{"count":4,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/26882\/revisions"}],"predecessor-version":[{"id":26888,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/26882\/revisions\/26888"}],"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=26882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=26882"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=26882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}