Creating a custom select component with asynchronous data loading capability and passing it as a parameter is my current challenge. Here's the setup for the component:
@Component({
selector: 'custom-select-combo',
template:
`<select #CustomSelectCombobox
class="form-control"
[(ngModel)]="selectedOption"
(ngModelChange)="selectedOptionChange.emit($event)"
[attr.data-live-search]="true">
<option *ngFor="let item of items | async" [value]="item">{{item}}</option>
</select>`
})
export class CustomSelectComboComponent extends AppComponentBase implements OnInit, AfterViewInit {
@ViewChild('CustomSelectCombobox') customSelectComboboxElement: ElementRef;
@Input() selectedOption: string = undefined;
@Input() items: string[];
@Output() selectedOptionChange: EventEmitter<string> = new EventEmitter<string>();
constructor(
injector: Injector) {
super(injector);
}
ngOnInit(): void {
const self = this;
setTimeout(() => {
$(self.customSelectComboboxElement.nativeElement).selectpicker('refresh');
}, 0);
}
ngAfterViewInit(): void {
$(this.customSelectComboboxElement.nativeElement).selectpicker({
iconBase: 'famfamfam-flag',
tickIcon: 'fa fa-check'
});
}
}
This snippet shows how to incorporate the custom select component in an HTML file:
<div class="col-xs-6">
<custom-select-combo [items]="tipoItems"></custom-select-combo>
</div>
As for the data loading part, I've implemented the following logic:
tipoItems = [];
constructor(
injector: Injector,
private _tipoDadoService: TipoDadoServiceProxy,
) {
super(injector);
this._tipoDadoService.getAllTipos()
.subscribe((result) => {
this.tipoItems = result;
});
}
Upon testing the code, I encountered the following errors in the console:
"ERROR Error: InvalidPipeArgument: '' for pipe 'AsyncPipe'"
"ERROR TypeError: Cannot read property 'dispose' of null".
Despite reviewing various tutorials, resolving these issues still eludes me.
@edit: As requested, here is the service class:
@Injectable()
export class TipoDadoServiceProxy {
// Implementation details of the service class...
}