I'm trying to wrap p-dropdown with a directive mainly to handle translations and other behaviours. However I would also like to add a blank line to the top of the list of options which I've been trying to do in the directive in an attempt to avoid doing so in the array of each service call for every dropdown. I've tried to use lifecycle hooks but to no real avail (ngAfterViewContentChecked polls too frequently). Is there a better way of going about this?
<p-dropdown>
formControlName="searchDropdown"
[options]="values"
searchDropDown
</p-dropdown>
@Directive({
selector: 'p-dropdown[searchDropDown]'
})
export class SearchDropDownDirective {
constructor(
private pDropdown: Dropdown,
private translateService: TranslateService
) {
this.pDropDown.placeholder = this.pDropdown.placeholder
? this.translateValue(this.pDropdown.placeholder)
: this.translateValue('DEFAULT')
this.pDropdown.options.unshift({label: '', value: ''}) //where does this go?
}
}
This works for the translations but I'm struggling to find a point at which to insert this space when the options are synchronous. I've tried creating a separate Observable binding and that works but doesn't seem sound.
@Directive({
selector: 'p-dropdown[searchDropDown]'
})
export class SearchDropDownDirective implements OnInit {
@Input() public SearchOptions: Observable<SelectItem[]>;
constructor(
private pDropdown: Dropdown,
private translateService: TranslateService
) {
this.pDropDown.placeholder = this.pDropdown.placeholder
? this.translateValue(this.pDropdown.placeholder)
: this.translateValue('DEFAULT')
}
public ngOnInit(): void {
this.searchOptions.pipe.subscribe({
next: options => {
this.options.unshift({label: '', value: ''});
this.pDropdown.options = options;
}
});
}
Should I just cut my loses and simply do this at each service for each dropdown? Advice would be appreciated, Thanks.