Angular uygulamalarında kullanılan ng-select, geliştiricilere zengin özelliklere sahip bir açılır liste çözümü sunan bir Angular bileşenidir. Bu bileşen, kullanıcıların belirli bir listeden seçim yapmalarını sağlar ve çeşitli özelleştirme seçenekleri sunar.

 

Kurulum

 

ng-select kullanabilmek için önce projenize Angular ve ng-select kütüphanesini eklemeniz gerekmektedir. Projenize Angular CLI kullanarak ng-select eklemek için terminal veya komut istemcisine şu komutu yazabilirsiniz:

 

NPM

 

npm i @ng-select/ng-select

 

YARN

 

yarn add @ng-select/ng-select

 

Kullanım

 

Modül İçinde İçe Aktarma (Import):

 

ng-select bileşenini kullanabilmek için, çalışma yaptığınız componente bağlı modül dosyanıza NgSelectModule'u eklemeniz gerekiyor.

 

Örneğin:

 

import { NgSelectModule } from '@ng-select/ng-select';
@NgModule({
 declarations: [
 // …
 ],
 imports: [
 NgSelectModule,
 // …
 ],
})
export class AppModule { }

 

HTML Dosyasında Kullanım:

 

Şimdi, ng-select bileşenini iki farklı kullanımı vardır bunlar;

 

<ng-select [searchable]="false"  class="custom" [(ngModel)]="selectedCar">
  <ng-option *ngFor="let car of cars" [value]="car.id">{{car.name}}</ng-option>

</ng-select><ng-select [items]="cars" 
           bindLabel="name" 
           bindValue="id" 
           [(ngModel)]="selectedCar">
</ng-select>

 

cars ve selectedCard değişkenlerini ilgili bileşenin TypeScript dosyasında tanımlamanız gerekmektedir.

selectedCar!: number;

cars = [
    {id: 1, name: 'Volvo'},
    {id: 2, name: 'Saab'},
    {id: 3, name: 'Opel'},
    {id: 4, name: 'Audi'},
  ];

 

İlk gösterilen html elementinde bulunan searchabledirective açılan listede arama yapılsın mı yapılmasın mı özelliği sağlıyor biz burada arama yapmak istemediğimizden false değerini atadık. Listede seçmiş olduğumuz değerinin id bilgisini ise ngModel yardımıyla alıyoruz ancak bu alma işlemini ve seçeneklerin listelenme işlemini ng-option ile yapılıyor çünkü ng-optionüzerinde bulunan ng-for yardımıyla array içerisinde bulunan değerler cars değişkeninden alınıp car adında yeni oluşan değişkene aktarılıp ekranan tek tek option olarak basılıyor basılma esnasında ise her bir değerin id bilgisi value directivene aktarılırken değerin name ise option içerisinde gösteriliyor.

 

selectedCar değişkeni ise seçmiş olduğunuz seçeneğin id değerini alıyor.

 

Burada listemiş olduğumuz değeleri görüyoruz ve seçmiş olduğumuz değerin id bilgisi ise altta gözükmektedir bundan sonraki işlemler tamamen size kalmış oluyor isterseniz veriyi başka bir yer ile bağlayabilir ya da backend’e gönderebilirsiniz.

 

Olayları İzleme (Event Handling):

 

ng-select bileşeni, çeşitli olayları (events) destekler. Örneğin, bir seçenek seçildiğinde bir olayı yakalamak için şu şekilde kullanabilirsiniz:

 

<ng-select [items]="cars" (change)="onSelectionChange($event)"></ng-select>onSelectionChange(event: any) {
  console.log('Seçilen değer:', event);
}

 

Özellikler

 

Çoklu Seçim Desteği:

 

ng-select, kullanıcılara birden fazla seçeneği aynı anda seçme yeteneği sağlar.

 

<ng-select [items]="cars" [multiple]="true" [(ngModel)]="selectedOptions"></ng-select>

 

Arama ve Filtreleme:

 

searchable açılır listede arama yapmamızı sağlıyor. Değer olarak true ve false değerini alıyor, true değerinde arama yapılıyor false değerinde ise arama yapılmıyor.

 

<ng-select [items]="cars" [searchable]="true" [(ngModel)]="selectedCar"></ng-select>

 

Özelleştirilebilir Stil:

 

ng-select, CSS sınıfları ve özel stil özellikleri aracılığıyla kolayca özelleştirilebilir.

 

<ng-select [items]="cars" class="custom-select" [(ngModel)]="selectedCar"></ng-select>.custom-select {
  // Özel stil tanımları
}

 

Async Veri Yükleme:

 

Uzak bir API’den veya veritabanından veri çekip bu verileri ekranda gösterelim.

 

https://jsonplaceholder.typicode.com/users adında bir apimiz var bu apiye istek atıp gelen değerlere göre ng-select ile kullanıcıların seçebilmesini sağlayalım.

 

Öncelikle apimize istek atmamız gerekiyor ancak istek atabilmemiz için constructor içersine HttpClient özelliğini private olarak tanımlamamız gerekiyor.

 

constructor(private http: HttpClient) {
}

 

tanımlama işlemi bittikten sonra elimizde mevcut olan apiye HttpClient’in sağladı get() metodu ile subscribe olmamız gerekiyor. Bu işlemi ben ngOnInit() içerisinde yapacağım yani sayfa yüklendikten sonra ya da constructor içerisinden de yapabiliriz tamamen size kalmış.

 

 ngOnInit() {
    this.http.get('https://jsonplaceholder.typicode.com/users').subscribe({
      next: (data:any) => {
        console.log(data)
      },
      error: (err: Error) => {
        console.log(err)
      },
      complete: () => {
        console.log('işlem tamamlandı')
      }
    })
  }

 

yukarıda da görüldüğü üzere apiye istek ve dönüş olarak ise bize kullanıcıları getirdi.

 

İstek doğru çalışıyor ve veriler geliyor buraya kadar her şey tamamdır.

Şimdi sıra geldi users adında bir değişken oluşturup ardından ise istek sonrasında gelen verileri oluşturduğumuz değişkene atayıp console üzerinden tekrardan göstermek.

 

users:any;

 

ngOnInit() {
    this.http.get('https://jsonplaceholder.typicode.com/users').subscribe({
      next: (data:any) => {
        this.users=data;
        console.log(this.users)
      },
      error: (err: Error) => {
        console.log(err)
      },
      complete: () => {
        console.log('işlem tamamlandı')
      }
    })
  }

Değişken üzerinden gösterimide tamanlandığına göre artık html tarafına geçelim.

 

Öncelikle html üzerinden seçim yaptığımızda seçmiş olduğumuz değeri [(ngModel)] ile alacağımız için selectedUser adında bir değişken oluşturup sonra html üzerinden [(ngModel)] ’a atama yapmamız gerekiyor.

 

selectedUser!: number;

 

selectedUser değişkenine number tipini neden verdin die sorarsanız ben seçilen değerin id bilgisini alacağımdan böyle bir tanımlama yaptım sizler seçilen değerin farklı bir datasını alırsanız eğer ona göre tip tanımlaması yapabilirsiniz.

 

Fazla uzun tutmamak için kodu hızlıca aşağıda paylaştım ve ekran çıktısınıda aşağıda görebilirsiniz.

 

Burada dikkat edilmesi gereken durum seçim yapıldığında ben seçilen kullanıcının id bilgisini alıyorum sizler id bilgisi yerine ismi, adresini ya da istediğiniz neyse onu value içerisine yazmanız gerekiyor bilginiz olsun.

 

<ng-select [searchable]="false"  class="custom" [(ngModel)]="selectedUser">
  <ng-option *ngFor="let user of users" [value]="user.id">{{user.name}}</ng-option>
</ng-select>

{{selectedUser}}

Umarım okunaklık ve faydalı bir yazı olmuştur.

 

Kendinize iyi bakınnnn :)