Using *ngIf along with angular4 custom pipes

Question

I am using a custom pipe that filter the array based upon the first alphabet in string of array (phone directory style). Whenever i change the alphabet parameter the pipe return the filtered array and i display it using *ngFor. If no match is found it return empty array and my diplay are is blank.

I want that if pipe return empty array my display area should show a div 'No record found'. How can I do that.

<div *ngIf="currentList.length > 0; else nodata" id="outerContainer">
    <div id="listContainer">
        <div class="listItem" *ngFor="let list of currentList | listFilter : listfilterChar" (click)="openContactList()">
            <div class="listInfo">
              <h3>
                {{list.Name}}
              </h3>
          </div>
    </div>
    <div id="alphabetContainer">
      <p *ngFor="let letter of alphabetArray">
        <span class="alphabetContainer" (click)='setListFiltercharacter($event)'>{{letter}}</span>
      </p>
    </div>
  </div>

In the above code on clicking span.alphabetContainer, the variable listfilterChar is updated with alphabet and pipe filter the array. But if no contact found with matching initial alphabet display area remain blank.

Answer 1

Following this article, a better approach will be to do this:

<ng-container *ngIf=”(currentList | listFilter : listfilterChar) as result”>

  <div *ngFor=”let item of result”>
    {{item}}
  </div>

  <b *ngIf="!result.length">No record found</b>

</ng-container>