Angular2 hiding output if empty

Question

I have the code as shown bellow that gets some data from a REST endpoint and displays it in a list. The page loads fine and when input is entered into the textbox everything works as planned. the issue is if a user removes all input from the text box the output the output remains. is there anyway to use ngIf to say if searchRes is is empty then don't show anything? I tried to use *ngIf="searchRes.length > 0 but there was no change, the old output still got diplayed...

<div class="row">
<div class="col-md-12">
  <form>
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon">&gt;&gt;</span>
      <input type="text"
             class="form-control" [(ngModel)]="searchStr" name="searchStr" (keyup)="searchWord()">
      <span class="input-group-btn"></span>
    </div>
  </div>
</form>
</div>
</div>

<div *ngIf="searchRes" class="search-res well">
<div *ngFor="let res of searchRes">
<div class="row">
  <div class="col-md-12">
    <p>{{res}}</p>
  </div>
</div>
</div>
</div>

That should work depending on what the value of searchRes is and at what time it has which value (constructor, ngOnInit, ...) — Günter Zöchbauer
– Günter Zöchbauer, Commented Oct 14, 2016 at 5:22

Atal Kishore · Accepted Answer · 2016-10-14 05:23:31Z

1

when user removes all input from the text box just make searchRes empty in the component ( if you have other textboxes other than searchStr)

searchRes=[];

and in the html use

<div *ngIf="searchRes && searchStr" class="search-res well">

and your code will work fine

answered Oct 14, 2016 at 5:23

Atal Kishore

4,8083 gold badges20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ranakrunal9 · Accepted Answer · 2016-10-14 05:23:32Z

0

If you want to hide div with class search-res well when there is no value in text box then you can use <div *ngIf="searchStr" class="search-res well"> or you can make searchRes = [] in your component searchWord method by checking searchStr value is empty or not.

answered Oct 14, 2016 at 5:23

ranakrunal9

13.6k3 gold badges44 silver badges43 bronze badges

Collectives™ on Stack Overflow

Angular2 hiding output if empty

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related