I'm trying to use <ng-select> to implement a product filter. The filter values (brands) come from an Observable (HTTP request). I'm using a BehaviourSubject that I've bound to the ng-select. And nothing never appear in the dropdown list, it keeps showing "No item found"...
(I'm using Angular 16.2 and ng-select 11.1)
HTML
<ng-select [items]="brands$ | async"
placeholder="Marques"
[(ngModel)]="selectedBrands"
bindLabel="label"
[multiple]="true"
class="input-field">
<ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
<input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/> {{item.name}}
</ng-template>
</ng-select>
TS
@Component({
selector: 'app-product-grid',
templateUrl: './product-grid.component.html',
styleUrls: ['./product-grid.component.css']
})
export class ProductGridComponent implements OnInit {
brands$: BehaviorSubject<Brand[]> = new BehaviorSubject<Brand[]>([]);
selectedBrands: Brand[] = []
constructor(private pss: ProductStoreService){}
ngOnInit(): void {
this.pss.brands$.subscribe((brands:Brand[]) => {
console.log(brands.length + ' items') // this logs "9 items", as expected
this.brands$.next(brands)
})
}
}
The array of brands is very basic and looks like this
[{
entityID: 1,
label: "Adidas"
},...]