Angular ngFor Kullanımı

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

Listelerimizin gösterimini sağlamak için döngülerden yararlanırız. Döngüleri kullanabilmemiz için elimizde bir liste olması gerekir. Elimizde olan listenin de gösterimini sağlamak için Angular’da ngFor direktifini kullanırız.

Örnek vermek gerekirse müşteri listesi sayfamız olsun. Bu kayıtları listelemek istediğimizde de html tarafında bu direktifi kullanırız.

Hemen bir örnek ile bu işlemi gerçekleştirelim.

Yeni bir component oluşturmak istiyorum. Bu component’in ismi customer olsun. Terminal üzerinde aşağıdaki kodu yazıp çalıştırıyoruz.

ng generate component customer

Component oluşturma işleminden sonra elimizde bir liste olması gerekiyor.

Customer.component.ts içerisinde bir müşteri listesi(array) oluşturuyoruz. .

customer.component.ts

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

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

  customers:String[] = ["Alican","Ahmet","Ardahan"];

  constructor() { }

  ngOnInit(): void {
  }

}

customers isminde bir string array oluşturduk ve içerisine 3 adet eleman ekledik.

customers:String[] = [“Alican”,”Ahmet”,”Ardahan”];

Daha sonra customer.component.html sayfamıza gidiyoruz ve aşağıdaki gibi kodumuzu yazıyoruz.

customer.component.html

<h1>Customer List</h1>

<ul>
    <li *ngFor="let customer of customers">
        {{customer}}
    </li>
</ul>

Oluşturulan örnekte bir ul listesi bulunmakta ve içerisinde listenin elemanı için bir döngü oluşturulmuştur.

customers listemizde kaç adet eleman var ise o kadar eleman oluşturulur ve li tagı içerisinde yazılır ve böylelikle örnek müşteri listemizi ilgili sayfamızda göstermiş oluruz.

Son olarak oluşturduğumuz customer.component içeriğimizi göstermek için app.component.html içerisine componentimizi, ilgili selector değeri ne ise o şekilde eklememiz gerekmektedir.

app.component.html

<app-customer></app-customer>

<router-outlet></router-outlet>

Oluşturduğumuz componentimiz eğer app.module.ts içerisindeki declarations kısmında eklenmemiş ise bunu eklememiz gerekmektedir!

Angular ngFor Kullanımı işlemini gerçekleştirdik ve gösterimini sağlamış olduk.

Angular.io üzerinden de ngFor sayfasını inceleyebilirsiniz.

Umarım faydalı olur.

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