CODEWITHSUNDEEP
angularangular-forms
Travis Michael Heller
Travis Michael Heller

Reputation: 1248

On a ngFor iteration, if a value is equal to a specific value do not list out the value using Angular4

On a *ngFor iteration, if a value is equal to a specific value do not list out the value in the list using Angular4.

My template:

<div class="desktop-list btn-group-vertical show-cat">
    <button class="list-group-item list-group-item-action cat-btn" *ngFor='let category of categories' (click)="getCatName($event)">{{category}}<i class="glyphicon glyphicon-chevron-right"></i></button>
</div>
<div class="mobile-select show-cat">
    <select class="mobile-select show-cat" [ngModel]="selectedCat" (ngModelChange)="change($event)" name="category" id="cat-column" placeholder="Select a Category">
      <option [ngValue]="category" class="cat-btn" *ngFor='let category of categories'>{{category}}</option>
    </select>
</div>

Component getCategories function:

getCatgegories(masterProduct: number) {
  this.service.getCatgegories(masterProduct)
    .subscribe(response => {
      this.categories = response.catList;
      this.categories.splice(0,0, 'Select a Category');
      this.masterName = response.name;
    });
}

I want to check if the category is = 'Select a Category' and if it returns true it will not display the item in the list of buttons. I feel like this should be an easy thing to accomplish but have had no luck in finding the solution. Any help would be greatly appreciated, thank you.

Upvotes: 0

Views: 2380

Answers (3)

Mohamed Ali RACHID
Mohamed Ali RACHID

Reputation: 3297

as a simple solution : 

<div class="desktop-list btn-group-vertical show-cat">
    <ng-template ngFor let-category [ngForOf]="categories"> 
         <button class="list-group-item list-group-item-action cat-btn" *ngIf="category !=='Select a Category'" (click)="getCatName($event)">{{category}}<i class="glyphicon glyphicon-chevron-right"></i>
          </button>
    </ng-template>
</div>

hope it helps u :)

Upvotes: 1

H. Hakvoort
H. Hakvoort

Reputation: 161

I think you can use [hidden]=" category === 'Select a Category'"

Upvotes: 0

amal
amal

Reputation: 3170

There must be better ways to handle this conceptually, but if all you want is to just not show the label for that particular case, then you can wrap your label in a span and hide it for that particular case.

<div class="desktop-list btn-group-vertical show-cat">
    <button class="list-group-item list-group-item-action cat-btn" *ngFor='let category of categories' (click)="getCatName($event)">
      <span *ngIf="category !== 'Select a Category'">{{category}}<i class="glyphicon glyphicon-chevron-right"></i></span>
    </button>
</div>

Upvotes: 0

Related Questions