Incorporating Angular 8 and TypeScript into my project, I have a grid that consists of various internal components, one being <ng-select/>.
The data binding takes place in the child component during onInit. Upon loading and initialization of the data, all values are displayed correctly, and the filter functions as expected. However, the selected item does not appear visually until I interact with the dropdown menu by clicking on it. Once I do this, the proper value is then selected.
https://i.sstatic.net/PfkwG.png
Code snippet from the parent component:
<clr-dg-cell>
{{staffedReferral?.agency?.displayName}}
<span>
<app-agency-rep-select
[agencyId]=staffedReferral?.agency?.id
[selectedAgencyRepId]=staffedReferral?.agencyRepId
(change)="changeAgencyRep($event, staffedReferral)">
</app-agency-rep-select>
</span>
</clr-dg-cell>
Code snippet from the select component:
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';
import { IAgencyRep } from '@core/model';
import { RootStoreState, AgencyRepStoreSelectors, AgencyRepStoreActions } from '@app/_root-store';
import { AgencyRepDataService } from '@core/api/agency-rep-data.service';
@Component({
selector: 'app-agency-rep-select',
template: `
<ng-select
[loading]="isLoading$ | async"
[ngModel]="_agencyRep"
[items]="reps"
(ngModelChange)="onChange($event)"
(open)="onOpen()"
[placeholder]="placeholder || 'Agency Reps...'"
bindLabel="fullName"
>
</ng-select>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AgencyRepSelectComponent implements OnInit {
@Output() change: EventEmitter<IAgencyRep> = new EventEmitter();
@Input() placeholder?: string;
@Input() selectedAgencyRepId?: number;
@Input() agencyId?: number;
reps: IAgencyRep[] = [];
_agencyRep: IAgencyRep;
error$: Observable<string>;
isLoading$: Observable<boolean>;
constructor(private store$: Store<RootStoreState.State>, private dataService: AgencyRepDataService) {
}
ngOnInit(): void {
this.dataService.getAgencyRepsByAgencyId<IAgencyRep[]>(this.agencyId)
.subscribe(
(data) => {
data.forEach(d => d.fullName = d.user.firstName + ' ' + d.user.lastName);
this.reps = data;
if (this.selectedAgencyRepId) {
this._agencyRep = data.find(d => d.id === this.selectedAgencyRepId);
}
}
);
}
onOpen() {
}
onChange(agencyRep) {
if (!agencyRep) {
agencyRep = { id: null };
}
this.change.emit(agencyRep);
}
}