Use resultTemplate
to show your own template
component.ts
constructor(private _service: WikipediaService) {}
search = (text$: Observable<string>) =>
text$.pipe(
debounceTime(300),
distinctUntilChanged(),
tap(() => (this.searching = true)),
switchMap(term =>
this._service.search(term).pipe(
map((x: any) => {
if (x.length > 0) {
this.searchFailed = false;
return x;
} else {
this.searchFailed = true;
return ["No Results Found"];
}
})
)
),
tap(() => (this.searching = false))
);
formatter = x => x;
typeaheadOnSelect(evt: NgbTypeaheadSelectItemEvent) {
if (evt.item == "No Results Found") {
evt.preventDefault();
}
}
component.html
<ng-template #rt let-r="result" let-t="term">
<ngb-highlight *ngIf="!searchFailed" [result]="r" [term]="t"></ngb-highlight>
<button class="d-button ngb-highlight" *ngIf="searchFailed" disabled>
No Record Found
</button>
</ng-template>
<label for="typeahead-template">Search for a state:</label>
<input
id="typeahead-template"
type="text"
class="form-control"
[(ngModel)]="model"
[ngbTypeahead]="search"
[resultTemplate]="rt"
(selectItem)="typeaheadOnSelect($event)"
[inputFormatter]="formatter"
/>
here the working stackblitz
demo:
https://stackblitz.com/edit/angular-s3wzr3-vxfppg?file=src/app/typeahead-template.html
Hope this helps :)
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…