Reputation: 2461
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">>></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>
Upvotes: 3
Views: 1913
Reputation: 13558
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.
Upvotes: 0
Reputation: 4758
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
Upvotes: 1