Angular ngIf Kullanımı

Merhaba arkadaşlar, bu yazımda sizlere Angular ngIf Kullanımı konusunu aktarmaya çalışacağım.

ngIf ile belirli koşullara göre bir kontrol sağlayıp ilgili içeriğin gözükmesini ya da gözükmemesini sağlayabiliriz.
If-Else If-Else mantığında düşünürsek eğer ilgili DOM nesneleri üzerinde kontrol sağlayabilir ve müdahale edebiliriz. Angular da bunu sağlamak için ngIf direktifi kullanılır.

Basit bir örnek ile gösterim sağlamak istiyorum.

<div *ngIf="true">
 Angular ngIf Kullanımı
</div>

Örnekte görüldüğü üzere html nesnelerimizin içerisinde *ngIf direktifini kullanarak bu işlemi gerçekleştirebiliriz.

Diğer bir örnek ise typescript üzerindeki bir değerle eşleştireceğiz.

ng-if.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-ng-if',
  templateUrl: './ng-if.component.html',
  styleUrls: ['./ng-if.component.css']
})
export class NgIfComponent implements OnInit {

  isShow:boolean = true;

  constructor() { }

  ngOnInit(): void {
  }

  show(){
    this.isShow = true;
  }

  hide(){
    this.isShow = false;
  }
}

ng-if.component.html

<h2> isShow : {{isShow}}</h2>

<button (click)="show()" class="btnNgIf">
Show
</button>
<br/><br/>
<button (click)="hide()" class="btnNgIf">
Hide
</button>


<div *ngIf="isShow">
    <h1> Angular ngIf Kullanımı</h1> 
</div>

ng-if.component.css

.btnNgIf{
    width: 100px;
    padding: 5px;
}

Örneğimizde html sayfamızdaki div içerisinde ngIf direktifini isShow değerimize bağladık ve bu değerin durumunu butonlarla değiştirebiliyoruz. Show ve Hide ismindeki butonlarımız ile ilgili div elementini gösterebilir ve gösterimden kaldırabiliriz.

ngIf direktifini yukarıdaki örneklerdeki gibi gerçekleştirebiliriz.

Angular ngIf Kullanımı konusu ile ilgili anlatacaklarım şimdilik bu kadar. İlerleyen yazılarda daha detaylı bir şekilde kullanımlar gerçekleştireceğiz.

Umarım faydalı olur.

Bir sonraki yazıda görüşmek üzere…