CODEWITHSUNDEEP
angular
arn-arn
arn-arn

Reputation: 1377

I want to display some useful information when my Observable returns empty

I have a home page where there is a search input box and it routes to another page to display the results. In that result page i have an *ngFor to loop thru the returned observable (searchResult).

I have a <div *ngIf="searchResult"> which shows if the observable is empty. However, when component initializes, from home page to the result page, this div is loading quickly and disappears after the search result returns. Is there another way to check if Observable is empty so i can just use boolean instead of using this *ngIf="searchResult".

here is my subscription:

getDocument(searchText:string) {
        this._contractService.getDocument(searchText)
            .subscribe(
            document => this.document = document,
            error => this.errorMessage = <any>error);

    }

here is my *ngIf:

<div id="search-not-found" class="col-xs-12" *ngIf="!searchResult">
 <div class="alert alert-success" role="alert"><p>Sorry, we did not find any match related to your search"</p></div>
      </div>

I'd appreciate any help. thanks

Upvotes: 0

Views: 60

Answers (1)

arn-arn
arn-arn

Reputation: 1377

i was able to resolve the issue. I added a boolean variable (searchResultEmpty:boolean=false) and initialize it as false. Then in my subscription i change that boolean to true.

here is my updated subscription:

getDocument(searchText:string) {
        this._contractService.getDocument(searchText)
            .subscribe(
            document => {this.document = document, this.searchResultEmpty=true},
            error => this.errorMessage = <any>error);

    }

here is div:

<div *ngIf="searchResultEmpty">
<div id="search-not-found" class="col-xs-12" *ngIf="!searchResult">
 <div class="alert alert-success" role="alert"><p>Sorry, we did not find any match related to your search"</p></div>
      </div>
</div>

Upvotes: 0

Related Questions