How to display element on no results

  angular, html, typescript

I’m having trouble coming up with a way to show my "no results" div element. Basically, I have a list of order timeline section components, each one of these containing order components. Like so:

enter image description here

<div class="list-container" [ngClass]="{section: isDeliverySlotsActive === false}">
    <label class="list-header" *ngIf="isDeliverySlotsActive === true" style="margin-top: 1.625rem">DELIVERY SLOTS ORDERS</label>
    <div [ngClass]="{section: isDeliverySlotsActive === true}" *ngFor="let date of timelines">
/* no results div goes here, waiting to be displayed */

For each section, a filtering method is applied when the user searches for an order using the search bar. If the search term does not correspond to an order in a section, the order is not displayed for that section. If there are no results for that section the section header is also not displayed.

My filter method in the section component:

filterSectionOrders(searchString: string){
    if(!searchString) return;
        this.filteredSectionOrders = this.filteredSectionOrders.filter(order => order.order_num.toString().indexOf(searchString) !== -1);
        this.filteredSectionOrders = this.filteredSectionOrders.filter(order => {
            if(order.first_name && order.last_name){
                let fullName = order.first_name + " " + order.last_name;
                if(fullName.toLowerCase().indexOf(searchString.toLowerCase()) !== -1){
                    return order;

Given that I apply this filter to each section and not to the list as a whole, what can I do to find out that there are 0 results so I can show a div element with a "no results found" message?

Thanks in advance.

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.