I have a search script that a user may search persons etc. I want to display a message if what he or types doesn't exist in the array. By default, I display some results and it displays the desired person when one writes on searchbar. but I want to show a message if what the user writes on searchbar doesn't much the array. the ngfor works perfectly I just can't show the message.

I did a ngIf but doesn't show the #noThings when I type for example djlsklkssk.

Note that userSet always has length > 0 because I call the API anyway.

<ion-searchbar style="height: 30px" showCancelButton="focus" cancelButtonText="Custom Cancel" animated placeholder="Search Rovespier" [(ngModel)]="terms"></ion-searchbar>

<ion-card *ngFor="let item of userSet | search : terms">
    <div *ngIf="item; else noThings">
        {{item.name}}
    </div>
</ion-card>
<ng-template #noThings>
    <div>
        No Result
    </div>
</ng-template>

TS

I have a search script that a user may search persons etc. I want to display a message if what he or types doesn't exist in the array. By default, I display some results and it displays the desired person when one writes on searchbar. but I want to show a message if what the user writes on searchbar doesn't much the array. the ngfor works perfectly I just can't show the message.

I did a ngIf but doesn't show the #noThings when I type for example djlsklkssk.

Note that userSet always has length > 0 because I call the API anyway.

<ion-searchbar style="height: 30px" showCancelButton="focus" cancelButtonText="Custom Cancel" animated placeholder="Search Rovespier" [(ngModel)]="terms"></ion-searchbar>

<ion-card *ngFor="let item of userSet | search : terms">
    <div *ngIf="item; else noThings">
        {{}item.name}}
    </div>
</ion-card>
<ng-template #noThings>
    <div>
        No Result
    </div>
</ng-template>

.ts

userSet: any = [];

constructor() {
    this.searchSet();
}

searchSet() {
    this.userData.searchUser()
        .map(res => res.json())
        .subscribe(data => {

            if (data.success) {
                this.userSet = data.searchDetails; // then it is uid_fk
            }
        });
}