<\/div>\n
Merhaba,<\/p>\n
Bu i\u00e7eri\u011fimizde; Angular uygulamalar\u0131nda, yap\u0131sal olarak bildi\u011finiz klasik “if – else if – else” mant\u0131\u011f\u0131nda DOM nesnelerine belirli \u015fartlara g\u00f6re kontrol sa\u011flamaya ve m\u00fcdahalede bulunmaya yarayan ngIf direktifi \u00fczerine konu\u015fuyor olaca\u011f\u0131z.<\/p>\n
ngIf ile If Yap\u0131s\u0131<\/span><\/h4>\n
\u0130lk olarak ngIf direktifinin en sade prototipini ele alarak konuya ba\u015flayal\u0131m;<\/p>\n
\r\n<[HTML NESNES\u0130] *ngIf="[\u015eART]">\r\n<\/pre>\nYukar\u0131daki prototipi incelerseniz e\u011fer herhangi bir html nesnesine verilen(div, span, hr, br vs. vs.)<\/span> ngIf direktifi i\u00e7erisindeki \u015fart ge\u00e7erliyse e\u011fer ilgili html nesnesi sayfaya bas\u0131lacakt\u0131r.<\/p>\n
\u015eimdi a\u015fa\u011f\u0131daki \u00f6rnekleri inceleyiniz.<\/p>\n
\n\n\r\n<div *ngIf="3 == 3">\r\n  Merhaba\r\n<\/div>\r\n<\/pre>\n<\/a><\/li>\n
\n\r\n<div *ngIf="false">\r\n  Merhaba\r\n<\/div>\r\n<\/pre>\n\u015eart “false” oldu\u011fu i\u00e7in div nesnesini ekrana basmayacakt\u0131r.<\/li>\n<\/ul>\n
E\u011fer ki component class i\u00e7erisinde tan\u0131mlanan de\u011fi\u015fkenler \u00fczerinde ngIf yap\u0131s\u0131n\u0131 kullanmak istiyorsan\u0131z a\u015fa\u011f\u0131daki \u00f6rneklerde oldu\u011fu gibi \u00e7al\u0131\u015fabilirsiniz.<\/p>\n\r\nimport { Component, OnInit } from '@angular\/core';\r\n@Component({\r\n  selector: 'app-ng-if-example',\r\n  templateUrl: '.\/ng-if-example.component.html',\r\n  styleUrls: ['.\/ng-if-example.component.css']\r\n})\r\nexport class NgIfExampleComponent implements OnInit {\r\n  deger1: number = 100;\r\n  deger2: string = "Merhaba";\r\n  deger3: boolean = false;\r\n  constructor() { }\r\n  ngOnInit() {\r\n  }\r\n}\r\n<\/pre>\n\n\n\r\n<div *ngIf="deger1">\r\n  {{deger1}}\r\n<\/div>\r\n<div *ngIf="deger2">\r\n  {{deger2}}\r\n<\/div>\r\n<\/pre>\nBu \u015fekilde ilgili de\u011fi\u015fkenin de\u011feri var m\u0131? yok mu? kontrol ediliyor. E\u011fer varsa ilgili html nesnesi ekrana bas\u0131l\u0131yor.
\n<\/a><\/li>\n
\n\r\n<div *ngIf="!deger3">\r\n  {{deger3}}\r\n<\/div>\r\n<\/pre>\n“True” de\u011feri yaz\u0131lacakt\u0131r.<\/li>\n
\n\r\n<div *ngIf="deger1 >= 100">\r\n  {{deger1}}\r\n<\/div>\r\n<\/pre>\n“100” de\u011feri yaz\u0131lacakt\u0131r.<\/li>\n
\n\r\n<div *ngIf="deger1 >= 100 && deger2 == 'Merhaba'">\r\n {{deger2}} {{deger1}}\r\n<\/div>\r\n<\/pre>\n“Merhaba 100” de\u011feri yaz\u0131lacakt\u0131r.<\/li>\n<\/ul>\n
ngIf ile If – Else Yap\u0131s\u0131<\/span><\/h4>\nE\u011fer ki ngIf direktifi ile “if – else if” \u015feklinde \u015fart ko\u015fmak istiyorsan\u0131z a\u015fa\u011f\u0131daki prototipte oldu\u011fu gibi \u00e7al\u0131\u015fman\u0131z gerekmektedir.<\/p>\n
\r\n<[HTML NESNES\u0130] *ngIf="[\u015eART]; else [GOSTER\u0130LECEK HTML NESNES\u0130]">\r\n<\/pre>\nBurada “else” durumunda \u00e7al\u0131\u015facak html nesneleri olarak genellikle <ng-template> <\/ng-template> nesnesini tercih etmekteyiz.
\n\u00d6rnek olarak a\u015fa\u011f\u0131daki kod bloklar\u0131 “if – else” yap\u0131s\u0131n\u0131n kullan\u0131m\u0131 hakk\u0131nda daha netle\u015ftirici olacakt\u0131r.<\/p>\n
\n\n\r\n<div *ngIf="true; else elseBlock">\r\n  ...e\u011fer \u015fart do\u011fruysa...\r\n<\/div>\r\n<ng-template #elseBlock> ...e\u011fer \u015fart yanl\u0131\u015fsa...<\/ng-template>\r\n<\/pre>\nif “true” de\u011ferine sahip oldu\u011fu i\u00e7in “…e\u011fer \u015fart do\u011fruysa…” de\u011feri yaz\u0131lacakt\u0131r.\n<\/li>\n
\n\r\nimport { Component, OnInit } from '@angular\/core';\r\n@Component({\r\n  selector: 'app-ng-if-example',\r\n  templateUrl: '.\/ng-if-example.component.html',\r\n  styleUrls: ['.\/ng-if-example.component.css']\r\n})\r\nexport class NgIfExampleComponent implements OnInit {\r\n  HavaBulutluMu: boolean = false;\r\n  constructor() { }\r\n  ngOnInit() {\r\n  }\r\n}\r\n<\/pre>\n\r\n<div *ngIf="HavaBulutluMu; else elseBlock">\r\n  Bulutlu\r\n<\/div>\r\n<ng-template #elseBlock> Bulutsuz<\/ng-template>\r\n<\/pre>\n“Bulutsuz” de\u011feri yaz\u0131lacakt\u0131r.\n<\/li>\n<\/ul>\n
ngIf ile If – Else If – Else Yap\u0131s\u0131<\/span><\/h4>\nAra\u015ft\u0131rmalar\u0131m neticesinde Angular 4 k\u00fct\u00fcphanesinde ngIf direktifine ait direkt olarak “if – else if- else” kal\u0131b\u0131nda bir yap\u0131 bulunmamaktad\u0131r. Bu y\u00fczden “else if” mant\u0131\u011f\u0131n\u0131 algoritmik olarak ger\u00e7ekle\u015ftirmekte ve a\u015fa\u011f\u0131daki mant\u0131kta \u00e7al\u0131\u015fmaktay\u0131z.<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\n@Component({\r\n  selector: 'app-ng-if-example',\r\n  templateUrl: '.\/ng-if-example.component.html',\r\n  styleUrls: ['.\/ng-if-example.component.css']\r\n})\r\nexport class NgIfExampleComponent implements OnInit {\r\n  OdenenTutar: number = 1000;\r\n  constructor() { }\r\n  ngOnInit() {\r\n  }\r\n}\r\n<\/pre>\n\r\n<div *ngIf="OdenenTutar >= 250 && OdenenTutar <= 500;else elseifBlock1">\r\n  {{OdenenTutar}} : [250 ile 500] aras\u0131nda.\r\n<\/div>\r\n<ng-template #elseifBlock1>\r\n  <div *ngIf="OdenenTutar >= 500 && OdenenTutar <= 1000; else elseifBlock2">\r\n    {{OdenenTutar}} : [500 ile 1000] aras\u0131nda.\r\n  <\/div>\r\n<\/ng-template>\r\n<ng-template #elseifBlock2>\r\n  <div *ngIf="OdenenTutar >= 1000 && OdenenTutar <= 1500; else elseBlock">\r\n    {{OdenenTutar}} : [1000 ile 1500] aras\u0131nda.\r\n  <\/div>\r\n<\/ng-template>\r\n<ng-template #elseBlock>\r\n{{OdenenTutar}} : [1500'den b\u00fcy\u00fck.\r\n<\/ng-template>\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer, her bir else bir ba\u015fka if’e y\u00f6nlenmektedir. Yani farkl\u0131 bir \u015fekilde “if – else if – else” yap\u0131s\u0131 olu\u015fturmu\u015f bulunmaktay\u0131z.<\/p>\n
ngIf ile If – Then – Else Yap\u0131s\u0131<\/span><\/h4>\nngIf direktifinde \u015fart e\u011fer do\u011fruysa ngIf’in tan\u0131mland\u0131\u011f\u0131 html nesnesi d\u0131\u015f\u0131ndaki farkl\u0131 bir nesne \u00fczerinde \u00e7al\u0131\u015fma yapmak istiyorsan\u0131z “then” yap\u0131s\u0131n\u0131 kullanman\u0131z gerekmektedir.<\/p>\n
\u00d6rne\u011fin;<\/p>\n
\r\n<div *ngIf="3 > 2; then thenBlock; else elseBlock">\r\n  if\r\n<\/div>\r\n<ng-template #thenBlock>then<\/ng-template>\r\n<ng-template #elseBlock>else<\/ng-template>\r\n<\/pre>\n\u015feklinde bir \u00e7al\u0131\u015fma ger\u00e7ekle\u015ftirirsek \u015fart\u0131m\u0131z true oldu\u011fu zaman ekrana “if” de\u011fil “then” yaz\u0131s\u0131 yaz\u0131lacakt\u0131r.<\/p>\n
Evet…
\nAngular 4 k\u00fct\u00fcphanesine \u00f6zel ngIf direktifi \u00fczerine konu\u015facaklar\u0131m\u0131z yeterli oldu\u011fu i\u00e7in art\u0131k makalemizi burada noktalayabiliriz.<\/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 uygulamalar\u0131nda, yap\u0131sal olarak bildi\u011finiz klasik “if – else if – else” mant\u0131\u011f\u0131nda DOM nesnelerine belirli \u015fartlara g\u00f6re kontrol sa\u011flamaya ve m\u00fcdahalede bulunmaya yarayan ngIf direktifi \u00fczerine konu\u015fuyor olaca\u011f\u0131z. ngIf ile...<\/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":[2262,2258,2261,2263,2260,2259],"class_list":["post-7633","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular-4-if-else","tag-angular-4-ngif-direktifi","tag-angular-if-else","tag-angular-if-then-else","tag-angular-ngif","tag-ngif-direktifi"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7633","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=7633"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7633\/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=7633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}