Merhabalar. Bu
yazımda sizlere bir Angular componenti olan ng-select ve daha
önceden yazdığım bir Spring REST service kullanarak autocomplete
olayını göstereceğim.
ng-select
componentinin kurulumu, temel kullanımı ve özellikleri hakkında
bilgi almak için buraya
bakabilirsiniz.
Burada gireceğimiz
kullanıcı adı değeri sistemde aranıp filtrelenerek bulunduğu
takdirde kullanıcı adının yanı sıra bu kullanıcıya ait tüm
bilgileri tutan bir array dolacaktır.
Öncelikle Java
tarafında ki servis metodum aşağıda ki gibidir.
@RequestMapping(value
= "/filtrele"
, method = RequestMethod.GET
, produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
public
ResponseEntity<List<KullaniciModel>>
filterKullanici(@RequestParam
String username){
List<KullaniciModel>
filteredKullanici
= kullaniciService.kullaniciFiltrele(username);
if(filteredKullanici
!= null
&& filteredKullanici.size()>0){
return
new
ResponseEntity<List<KullaniciModel>>(filteredKullanici,HttpStatus.OK);
}
return
new
ResponseEntity<List<KullaniciModel>>(HttpStatus.NOT_FOUND);
}
ng-select’in html
tarafında kullanımı aşağıda ki gibidir.
<div
class="form-group">
<label>Kullanıcı
Seçiniz</label>
<ng-select
[items]="kullanici
| async"
bindLabel="username"
placeholder="Kullanıcı
Ara"
[hideSelected]="true"
[multiple]="true"
typeToSearchText="Kullanıcı
adını yazınız"
notFoundText="Kullanıcı
Bulunamadı"
[loading]="kullaniciLoading"
[typeahead]="kullaniciInput"
[(ngModel)]="selectedUser">
</ng-select>
</div>
Component tarafında
ise aşağıda ki gibi kullanılır.
import
{ Component, OnInit
} from '@angular/core';
import
{ AuthService } from
'../../auth/auth.service';
import
{ Observable, of,
Subject,concat
} from 'rxjs';
import
{ catchError, debounceTime,
distinctUntilChanged, map,
tap, switchMap
} from 'rxjs/operators';
@Component({
selector:
'app-rol',
templateUrl:
'./rol.component.html',
styleUrls:
['./rol.component.css']
})
export
class RolComponent
implements OnInit
{
kullanici:
Observable<any>;
kullaniciLoading
= false;
kullaniciInput
= new Subject<string>();
selectedUser:
any[];
constructor(private
auhtService: AuthService
{ }
ngOnInit()
{
this.loadKullanici();
}
private
loadKullanici() {
this.kullanici
= concat(
of([]),
// default items
this.kullaniciInput.pipe(
debounceTime(200),
distinctUntilChanged(),
tap(()
=> this.kullaniciLoading
= true),
switchMap(term
=>
this.auhtService.getKullaniciFiltrele(term).pipe(
catchError(()
=> of([])),
// empty list on error
tap(()
=> this.kullaniciLoading
= false)
))
)
);
}
}
Angular tarafında
Java servisini çağırışım ise aşağıda ki gibidir.
getKullaniciFiltrele(username:string):Observable<any>{
return
this.http.get(this.apiUrl
+ 'api/kullanici/filtrele?username='+username);
}
Componentin autocomplete kullanımına dair ekran görüntüleri aşağıda ki gibidir.
