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 searchable
directive 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 :)
Yorumlar Henüz yorum yapılmamış
Yeni Yorum