<\/div>\n
Merhaba,<\/p>\n
Bu i\u00e7eri\u011fimizde Angular 4 k\u00fct\u00fcphanesinde Event Binding olgusunu inceliyor olaca\u011f\u0131z. Tabi web programlama yahut “front end” ile az \u00e7ok ilgilenen her er ki\u015finin yabanc\u0131l\u0131k \u00e7ekmeyece\u011fi bir konuda oldu\u011fundan fazla detaya bula\u015fmadan ilgili k\u00fct\u00fcphanede olay i\u015flemlerinin nas\u0131l ceyran etti\u011fini irdeleyecek ve makalemizi sonland\u0131raca\u011f\u0131z.<\/p>\n
O halde, hi\u00e7 vakit kaybetmeden buyrun ba\u015flayal\u0131m…<\/p>\n
Angular uygulamalar\u0131nda a\u015fa\u011f\u0131daki prototipte oldu\u011fu gibi event olu\u015fturmaktay\u0131z.<\/p>\n
\r\n<[HTML Nesnesi] (OLAY\/EVENT)="\u0130\u015eLEMLER\/FONKS\u0130YONLAR">\r\n<\/pre>\nYukar\u0131daki prototipi incelerseniz e\u011fer olaylar\u0131n parantez i\u00e7erisinde tan\u0131mland\u0131\u011f\u0131na dikkatinizi \u00e7ekerim.
\n\u015eimdi a\u015fa\u011f\u0131daki \u00f6rnekleri inceleyiniz.<\/p>\n
\n\n\r\nimport { Component } from '@angular\/core';\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n  ngClickFunction() {\r\n    alert("Button is click");\r\n  }\r\n}\r\n<\/pre>\n\r\n<button (click)="ngClickFunction()">T\u0131kla<\/button>\r\n<\/pre>\n<\/li>\n\n\r\nimport { Component } from '@angular\/core';\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n  ngTextRead(text: string) {\r\n    alert(text);\r\n  }\r\n}\r\n<\/pre>\n\r\n<button (click)="ngTextRead(txt1.value)">T\u0131kla<\/button>\r\n<input type="text" #txt1  \/>\r\n<\/pre>\nBurada butona t\u0131kland\u0131\u011f\u0131 zaman inputtaki de\u011fere “#txt1” etiketi sayesinde ula\u015fabilmekteyiz.\n<\/li>\n
\n\r\nimport { Component } from '@angular\/core';\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n  ngTextWrite(text: string) {\r\n    alert(text);\r\n  }\r\n}\r\n<\/pre>\n\r\n<input type="text" #txt1 (change)="ngTextWrite(txt1.value)" \/>\r\n<\/pre>\n<\/li>\n<\/ul>\n\u015euana kadar genel ge\u00e7er event yap\u0131lar\u0131n\u0131 ele ald\u0131\u011f\u0131m\u0131zdan dolay\u0131 \u00e7okta \u00fczerine durmaks\u0131z\u0131n direkt olarak yap\u0131sal a\u00e7\u0131dan iskeletini incelemi\u015f bulunmaktay\u0131z. Haliyle yava\u015f yava\u015f event yap\u0131lar\u0131n\u0131 Angular k\u00fct\u00fcphanesine \u00f6zel biraz daha derinle\u015ftirmeye ba\u015flayal\u0131m…<\/p>\n
Angular uygulamalar\u0131nda olaylar\u0131 belirli filtrelere tabii tutarak bind edebilmekteyiz. Yani uzun laf\u0131n k\u0131sas\u0131 filtreli olaylar olu\u015fturabilmekteyiz.<\/p>\n
A\u015fa\u011f\u0131daki kod blo\u011funu incelerseniz e\u011fer;<\/p>\n
\r\nimport { Component } from '@angular\/core';\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n  text = "";\r\n  onEnter(text: string) {\r\n    this.text = text;\r\n  }\r\n}\r\n<\/pre>\n\r\n<input #box (keyup.enter)="onEnter(box.value)">\r\n<p>{{text}}<\/p>\r\n<\/pre>\n“onEnter” event\u0131 “enter” tu\u015funa bas\u0131ld\u0131\u011f\u0131 zaman tetiklenecektir.<\/p>\n
<\/a><\/p>\n
Benzer mant\u0131kla a\u015fa\u011f\u0131daki gibi farkl\u0131 bir tu\u015f kombinasyonuda belirleyebiliriz;<\/p>\n
\r\n<input #box (keyup.b)="onEnter(box.value)">\r\n<p>{{text}}<\/p>\r\n<\/pre>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere “b” tu\u015funa bas\u0131ld\u0131\u011f\u0131 anda “onEnter” event\u0131 tetiklenecektir.<\/p>\n
Son olarak koleksiyonel durumlar\u0131 g\u00f6z \u00f6n\u00fcne almam\u0131z\u0131 sa\u011flayacak a\u015fa\u011f\u0131daki durumu de\u011ferlendirelim.<\/p>\n\r\nimport { Component } from '@angular\/core';\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n  personeller = ["Ahmet", "Ali", "Yusuf", "Ziya"];\r\n  personelEkle(personel: string) {\r\n    if (personel) \/\/ Personel bo\u015f mu dolu mu? -> TypeScript'te bu \u015fekilde direkt kontrol m\u00fcmk\u00fcn. \r\n      this.personeller.push(personel);\r\n  }\r\n}\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer “personeller” isminde bir string dizimiz mevcuttur. Ayr\u0131ca “personelEkle” isminde de ilgili diziye eleman eklememize yarayacak metodumuz vard\u0131r.<\/p>\n\r\n<input #txtpersonel type="text" (keyup.enter)="personelEkle(txtpersonel.value)" \/>\r\n<ul>\r\n  <li *ngFor="let personel of personeller">\r\n    {{personel}}\r\n  <\/li>\r\n<\/ul>\r\n<\/pre>\nInput’a girilen de\u011fer “enter” tu\u015funa bas\u0131ld\u0131\u011f\u0131 zaman tetiklenecek olan “keyup” event\u0131 arac\u0131l\u0131\u011f\u0131yla “personelEkle” fonksiyonu taraf\u0131ndan diziye eklenecektir. \u0130\u015fte b\u00f6yle durumda “ngFor” yap\u0131s\u0131 hemen tetiklenecek ve yeni eklenen veriyi de listelemeye dahil edecektir.
\n<\/a><\/p>\n
Angular uygulamalar\u0131nda event binding mekanizmas\u0131n\u0131n ne \u015fekilde, hangi kurallarda cereyan etti\u011fini hafif y\u00fczeysel de\u011ferlendirmi\u015f bulunmaktay\u0131z.<\/p>\n
Umar\u0131m faydal\u0131 bir i\u00e7erik olmu\u015ftur.<\/p>\n
Sonraki 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 4 k\u00fct\u00fcphanesinde Event Binding olgusunu inceliyor olaca\u011f\u0131z. Tabi web programlama yahut “front end” ile az \u00e7ok ilgilenen her er ki\u015finin yabanc\u0131l\u0131k \u00e7ekmeyece\u011fi bir konuda oldu\u011fundan fazla detaya bula\u015fmadan ilgili k\u00fct\u00fcphanede...<\/p>\n","protected":false},"author":1,"featured_media":7246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144],"tags":[2156,2146,2264,2267,2266,2265],"class_list":["post-7662","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular","tag-angular-4","tag-angular-4-event-binding","tag-angular-event-binding","tag-angular-filtreli-olaylar","tag-event-binding"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7662","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=7662"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7662\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7246"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=7662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}