<\/div>\n

Merhaba,<\/p>\n

Angular mimarisinde \u00e7al\u0131\u015fanlar\u0131n en b\u00fcy\u00fck murad\u0131, ihtiyaca istinaden yer yer template i\u00e7erisinde de\u011fi\u015fken tan\u0131mlay\u0131p kullanabilmekti diyebiliriz \ud83d\ude42 Evet, bu murada Angular 18’de gelmi\u015f olan Template Local Variables<\/em> \u00f6zelli\u011fi ile erdi\u011fimizi s\u00f6yleyebiliriz. Bu i\u00e7eri\u011fimizde gelen bu \u00f6zelli\u011fi t\u00fcm detaylar\u0131yla de\u011ferlendirecek ve inceleyece\u011fiz. Buyurun ba\u015flayal\u0131m…<\/p>\n

\u015eimdi her \u015feyden \u00f6nce Template Local Variables \u00f6zelli\u011finden \u00f6nce bir de\u011fi\u015fken tan\u0131mlama ihtiyac\u0131n\u0131 nas\u0131l gideriyorduk onu inceleyerek ba\u015flayal\u0131m…<\/p>\n

\n
\r\n@Component({\r\n selector: 'app-root',\r\n standalone: true,\r\n imports: [NgIf, AsyncPipe],\r\n template: `\r\n <div *ngIf="user$ | async as u">\r\n {{u.name}}\r\n <\/div>\r\n `\r\n})\r\nexport class AppComponent {\r\n user$: Observable<User>;\r\n\r\n ngOnInit() {\r\n let user: User = new User();\r\n user.name = "Gen\u00e7ay";\r\n user.surname = "Y\u0131ld\u0131z";\r\n this.user$ = of(user);\r\n }\r\n}\r\n<\/pre>\n<\/div>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere template i\u00e7erisinde de\u011fi\u015fkene ihtiyac\u0131m\u0131z oldu\u011fu durumlarda ngIf<\/code> direktifiyle yukar\u0131daki gibi kas\u0131nt\u0131 bir \u00e7al\u0131\u015fmayla bu ihtiyac\u0131 giderebiliyorduk. Ya da ayn\u0131 i\u015flemi @if<\/a> control flow syntax’\u0131 ile de a\u015fa\u011f\u0131daki gibi ger\u00e7ekle\u015ftirebiliyorduk;<\/p>\n
\n\r\n @if(user$ |async; as u){\r\n {{u.name}}\r\n }\r\n<\/pre>\n<\/div>\nHak verece\u011finiz \u00fczere faaliyet alan\u0131 a\u00e7\u0131s\u0131ndan olduk\u00e7a dar ve kas\u0131nt\u0131 olan bu kullan\u0131m \u015feklinin bir de say\u0131sal veriler \u00fczerinde a\u015fa\u011f\u0131daki gibi istemsiz handikaplar\u0131na da \u015fahit oluyorduk. \u015e\u00f6yle ki;<\/p>\n\n\r\n@Component({\r\n selector: 'app-root',\r\n standalone: true,\r\n imports: [NgIf, AsyncPipe],\r\n template: `\r\n <div *ngIf="point$ | async as p">\r\n {{p}}\r\n <\/div>\r\n\r\n @if(point$ |async; as p){\r\n {{p}}\r\n }\r\n `\r\n})\r\nexport class AppComponent {\r\n point$: Observable<number>;\r\n\r\n ngOnInit() {\r\n this.point$ = of(1);\r\n }\r\n}\r\n<\/pre>\n<\/div>\nYukar\u0131daki ‘point$’ say\u0131sal verisi e\u011fer ki 0(s\u0131f\u0131r)’\u0131n haricinde bir de\u011ferse ekrana yans\u0131t\u0131lmakta yok e\u011fer 0 ise ekranda hi\u00e7bir \u015fey g\u00f6r\u00fclmemektedir! \u00c7\u00fcnk\u00fc s\u0131f\u0131r, if ko\u015fulunda false’a kar\u015f\u0131l\u0131k gelmekte ve b\u00f6yle tutars\u0131z, insicams\u0131z, sa\u00e7ma sapan bir durum meydana gelmektedir!<\/p>\n \u0130\u015fte Angular 18’de tam da bu noktada template local variables \u00f6zelli\u011fi sayesinde @let<\/code> devreye girmekte ve ihtiyaca istinaden template i\u00e7erisinde bir de\u011fi\u015fkeni daha programatik usulde bir yakla\u015f\u0131mla bildirmemize ve bunu \u015fablonda istedi\u011fimiz noktada rahat\u00e7a kullanmam\u0131za olanak tan\u0131maktad\u0131r.<\/p>\n\n\r\n @let point = (point$ | async) ?? 0;\r\n {{point}}\r\n<\/pre>\n<\/div>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere art\u0131k \u015fablonda rahatl\u0131kla bir de\u011fi\u015fken tan\u0131mlayabilmekte ve ihtiya\u00e7 do\u011frultusunda bu de\u011fi\u015fken \u00fczerinde i\u015flemler ger\u00e7ekle\u015ftirerek \u00e7al\u0131\u015fmalar\u0131m\u0131z\u0131 y\u00fcr\u00fctebilmekteyiz.<\/p>\n \u015eahsen bu \u00f6zelli\u011fin en g\u00fczel getirisi a\u015fa\u011f\u0131daki gibi karma\u015f\u0131k kod konseptlerini \u015fablon i\u00e7erisinde de\u011fi\u015fkenle temsil ederek, kodun genel yap\u0131s\u0131n\u0131 sadele\u015ftirebilmesidir.<\/p>\n\n\r\n <p>Doldur be meyhaneci...<\/p>\r\n @let content = document.getElementById("para").innerHTML.toUpperCase();\r\n {{content}}\r\n<\/pre>\n<\/div>\nPeki @let<\/code> Nerelerde Kullan\u0131l\u0131r?<\/h3>\n@let<\/code> ile de\u011fi\u015fken tan\u0131mlamay\u0131 programatik mant\u0131k gere\u011fi ihtiya\u00e7 olan bir\u00e7ok noktada kullanabilmekteyiz. \u015eimdi gelin bu noktalardan esas olanlar\u0131 a\u015fa\u011f\u0131da birka\u00e7 sat\u0131r e\u015fli\u011finde ele alal\u0131m;<\/p>\n \nasync pipe’lar da kullan\u0131labilir<\/em><\/strong> \n@let<\/code>‘i, yukar\u0131daki sat\u0131rlarda \u00f6rneklendirdi\u011fimiz \u00fczere asenkron s\u00fcre\u00e7lerde kullanabiliriz.<\/p>\n\n\r\n <div>\r\n @let user = (user$ | async) ?? { name: 'Hilmi' }; \r\n <h1>{{user.name}}<\/h1>\r\n <\/div>\r\n<\/pre>\n<\/div>\n<\/li>\ncontrol flow syntax’\u0131nda kullan\u0131labilir<\/em><\/strong> \nEe yani, mant\u0131ken control flow syntax’\u0131nda da kullanabiliriz.<\/p>\n\n\r\n <div>\r\n @let user = (user$ | async) ?? { name: 'Hilmi' }; \r\n @if(user){\r\n <h1>{{user.name}}<\/h1>\r\n }\r\n <\/div>\r\n<\/pre>\n<\/div>\n<\/li>\n@for<\/code> i\u00e7erisinde kullan\u0131labilir<\/em><\/strong> \n@for<\/code> d\u00f6ng\u00fcs\u00fc i\u00e7erisinde de tekrarl\u0131 bir \u015fekilde kullanabiliriz.<\/p>\n\n\r\n@Component({\r\n selector: 'app-root',\r\n standalone: true,\r\n imports: [NgIf, AsyncPipe],\r\n template: `\r\n <ul>\r\n @let totalSalary = _totalSalary;\r\n {{totalSalary}}\r\n @for (employee of employees; track $index) {\r\n @let totalSalaryRate = (employee.salary * 100) \/ totalSalary;\r\n <li>{{employee.name}} -> {{employee.salary}} -> Total Salary Rate : {{totalSalaryRate}}<\/li>\r\n }\r\n <\/ul>\r\n `\r\n})\r\nexport class AppComponent {\r\n employees: { name: string, salary: number }[] =\r\n [\r\n { name: 'Muiddin', salary: 100 },\r\n { name: '\u015euayip', salary: 200 },\r\n { name: 'Cafer', salary: 300 },\r\n { name: 'Hilmi', salary: 400 },\r\n { name: 'R\u0131fk\u0131', salary: 500 }\r\n ];\r\n\r\n _totalSalary = this.employees.reduce((totalSalary, employee) => totalSalary + employee.salary, 0);\r\n}\r\n<\/pre>\n<\/div>\n<\/li>\nternary operat\u00f6r\u00fc ile kullan\u0131labilir<\/em><\/strong>\n\n\r\n <ul>\r\n @for (employee of employees; track $index) {\r\n @let isAdmin = employee.admin ? 'Yes' : 'No';\r\n <li>{{employee.name}} | {{isAdmin}}<\/li>\r\n }\r\n <\/ul>\r\n<\/pre>\n<\/div>\n<\/li>\nsignal<\/a> ile kullan\u0131labilir<\/em><\/strong>\n\n\r\n@Component({\r\n selector: 'app-root',\r\n standalone: true,\r\n imports: [NgIf, AsyncPipe],\r\n template: `\r\n @let _user = user();\r\n <h1>{{_user.name}}<\/h1>\r\n `\r\n})\r\nexport class AppComponent {\r\n user: Signal<User>;\r\n ngOnInit() {\r\n let _user: User = new User();\r\n _user.name = 'Gen\u00e7ay';\r\n _user.surname = 'Y\u0131ld\u0131z';\r\n this.user = signal(_user);\r\n }\r\n}\r\n<\/pre>\n<\/div>\n<\/li>\n<\/ul>\nVelhas\u0131l,<\/p>\n G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere Angular mimarisi template local variables \u00f6zelli\u011fi sayesinde control flow syntax’ta oldu\u011fu gibi gayet g\u00fczel ve \u00f6nemli bir iyile\u015ftirmeyle kar\u015f\u0131m\u0131za gelmekte ve ihtiya\u00e7 durumlar\u0131na kar\u015f\u0131n zarif bir \u00e7\u00f6z\u00fcm sunmaktad\u0131r. Heyecanla bu \u00f6zelli\u011fi deneyimlemek \u00fczere oldu\u011fumuzu belirterek i\u00e7eri\u011fi burada noktal\u0131yorum.<\/p>\n \u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle\u2026 \nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere\u2026 \n\u0130yi \u00e7al\u0131\u015fmalar\u2026<\/p>\n","protected":false},"excerpt":{"rendered":" Merhaba, Angular mimarisinde \u00e7al\u0131\u015fanlar\u0131n en b\u00fcy\u00fck murad\u0131, ihtiyaca istinaden yer yer template i\u00e7erisinde de\u011fi\u015fken tan\u0131mlay\u0131p kullanabilmekti diyebiliriz \ud83d\ude42 Evet, bu murada Angular 18’de gelmi\u015f olan Template Local Variables \u00f6zelli\u011fi ile erdi\u011fimizi s\u00f6yleyebiliriz. Bu i\u00e7eri\u011fimizde...<\/p>\n","protected":false},"author":1,"featured_media":26698,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420,5061,5077],"tags":[5080,5079,2446,5078],"class_list":["post-27083","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-angular-18","category-angular-18-2","tag-angular-18-let","tag-angular-18-2","tag-let","tag-template-local-variables"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27083","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=27083"}],"version-history":[{"count":7,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27083\/revisions"}],"predecessor-version":[{"id":27090,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27083\/revisions\/27090"}],"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=27083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=27083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=27083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}