Angular Ng-Template Nedir?

Merhaba Arkadaşlar, bu yazımda sizlere Angular Ng-Template Nedir? Konusundan bahsedeceğim.

Ng-Template, kullandığımız component’ler gibi yeniden kullanabilen şablonlar oluşturmamızı sağlarlar. Kullanıma hazır bloklar gibi düşünebiliriz. Ng-Template’ler biz herhangi bir çağırım yapmadıktan sonra ya da belirli bir koşul gerçekleşmedikten sonra sayfada görünmezler. Ng-Template çağırmadıkça kod üzerine yansımaz.

Bir önceki yazımda Angular ngIf Kullanımı konusundan bahsetmiştim. Burada da bir ngIf kullanımı yaparak fakat bu sefer else ile birlikte bir kullanım gerçekleştireceğiz. Else kullanımında da ng-template‘lerden yararlanacağız.

Hemen örneğimize geçelim.

Yeni bir component oluşturuyoruz.

ng generate component ng-template

Component oluşturulduktan sonra typescript dosyamızı ve html dosyamızı açıyoruz. Oluşturacağımız örneğimiz basit bir login işlemi gibi düşünebiliriz. Giriş Yap ve Çıkış Yap adında 2 adet butonumuz olacak. Bir ng-template direktifimiz olacak ve bilgi amaçlı giriş ve çıkış bilgisini gösteren değerimiz olacaktır.

ng-template.component.ts

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

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

  isLoggedIn: boolean = false;

  constructor() { }

  ngOnInit(): void {
  }

  login(){
    this.isLoggedIn=true;
  }

  logout(){
    this.isLoggedIn=false;
  }

}

isLoggedIn isminde boolean bir değişken tanımlaması yaptıktan sonra ilk değerini false olarak belirliyoruz. Daha sonra ilgili butonlara tıklanıldığında çalışacak login ve logout metodlarımız çalışacak ve isLoggedIn değerimizi giriş yapıldığında true çıkış yapıldığında false olarak değiştiriyoruz.

ng-template.component.html

<h1> {{isLoggedIn}} </h1> 

<button (click)="login()" class="btnNgIf">
    Giriş Yap
</button>
&nbsp;
<button (click)="logout()" class="btnNgIf">
    Çıkış Yap
</button> 

<div *ngIf="isLoggedIn; else logoutBlock">
    <h2> Çıkış Yap</h2>
</div>

<br/><br/>

<ng-template #logoutBlock>
    <h2> Giriş Yap </h2>
</ng-template>

İlk olarak değerimiz false olduğu için ekranda Giriş Yap yazısı gözükecektir. Giriş yap butonuna tıkladığımızda da Çıkış Yap değeri gözükecektir.

Görüldüğü üzere <ng-template> direktifini örnekteki gibi kullanabiliriz. NgIf koşulundaki else kısmında ng-template’in ismini belirlemiş oluyoruz. NgTemplate kullanımında da # işareti ile bu ismi belirtip ilgili koşul gerçekleştikten sonra çağırılmasını sağlıyoruz.

Angular Ng-Template Nedir? konusu ile ilgili anlatacaklarım buraya kadar.

Umarım faydalı olur.

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