'Show div if no data in api response Angular

If not data is received on api response, it shows a div. Is the below the best way to do it? At the moment if I click on my search button with the getAll() method with nothing in the search box I get the Div appear. But if I click the div away (Close button) and try again, the div does not appear? do I have to loop the function over? FYI I am using Bootstrap also.

Component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../../services/api.service';
import { FormGroup, FormControl } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { faSearch } from '@fortawesome/free-solid-svg-icons';
import { faRedo } from '@fortawesome/free-solid-svg-icons';
import { faHeadphones} from '@fortawesome/free-solid-svg-icons';
import { faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.scss']
})
export class ContentComponent {

  public data = [];
  public apiData: any;
  public loading = false;
  public noData = false;
  p: number = 1;
  faSearch = faSearch;
  faRedo = faRedo;
  faHeadphones = faHeadphones;
  faExternalLinkAlt = faExternalLinkAlt;
  searchQuery : string = "";

  constructor(private service: ApiService) { }

  getAll() {
    this.service.getAll(this.searchQuery).subscribe((results) => {
      this.loading = true;
      console.log('Data is received - Result - ', results);
      this.data = results.results;
      this.loading = false;

      if (this.data.length <= 0) {
        this.noData = true;
      } else if (this.data.length >= 1) {
        this.noData = false;
      } else {
        this.noData = true;
      }
    })
  }

  refresh(): void {
    window.location.reload();
  }  

  Search(){
   this.service.getAll(this.searchQuery).subscribe((results) => {
      this.loading = true;
      console.log('Data is received - Result - ', results);
      this.data = results.results;
      this.loading = false;
    })
  }
  ngOnInit() {

  }
}

html

<ng-container *ngIf="noData">
  <div class="container">
      <div class="alert alert-warning alert-dismissible fade show" role="alert">
          <strong>Holy guacamole!</strong> You should check in on some of those fields below.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
  </div>
</ng-container>
javascripthtmlangular


Solution 1:[1]

Try this. In your service

getAll() {
    this.service.getAll(this.searchQuery).subscribe((results) => {
      this.loading = true;
      this.data = results.results;
      this.loading = false;
    })
}

in your html

<div *ngIf="data?.length===0">No Data</div>
<div *ngIf="data && data?.length !== 0">Result</div>

Solution 2:[2]

try this it should work

  if (this.data.length != 0) {
    this.noData = true;
  } else if (this.data.length == 0) {
    this.noData = false;
  } else {
    this.noData = true;
  }
})

or

   if (this.data.length > 0) {
    this.noData = true;
  } else if (this.data.length == 0) {
    this.noData = false;
  } else {
    this.noData = true;
  }
})

Solution 3:[3]

In the end I just removed the data-dismiss="alert" from the button and added a (click) function to the close button based on the noData variable.

Html 

 <button type="button" class="close" (click)="noData()" aria-label="Close">
     <span aria-hidden="true">&times;</span>
 </button>

component.ts

noData() {
    this.noData = false;
}

Solution 4:[4]

First of all, I would suggest that you take the ngIf from the "containers" because that may cause problems with Angular... and I do that using the lenght propery of the array!

<ng-container>
  <div class="container">
      <div *ngIf="data.length == 0" class="alert alert-warning alert-dismissible fade show" role="alert">
          <strong>Holy guacamole!</strong> You should check in on some of those fields below.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
  </div>
</ng-container>

but NOTICE that in order to work properly you MUST declare the array and assign it empty at declartion, like this:

data:any[]=[];

Solution 5:[5]

I used these codes and resolved the problem of showing alert when no data is loaded from api:

    allNews: NewsDto[];
    <div *ngIf="allNews?.length==0" class="alert">There is not any news to show.</div>
    <div *ngFor="let news of allNews">
        <app-news-component [news]="news"></app-news-component>
    </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dasunse
Solution 2
Solution 3 Sole
Solution 4 Ari Waisberg
Solution 5

Related Questions