CODEWITHSUNDEEP
htmlcssangulartypescript
sanjana
sanjana

Reputation: 131

How to Change Data by Matching Value in Angular 8

I am trying to change the gallery items by matching value, default I want to show All items if click on the Photos i want to show photos. I tried with switch statement its working fine but I am trying to know any other shortest way.

public items = [{
    value: 'All',
    name: 'All Items'
  },
  {
    value: 'Photos',
    name: 'Photo Items'
  },
  {
    value: 'Video',
    name: 'Video Items'
  },
];
}
.gallery {
  margin-top: 30px;
}
.card {
  background: whitesmoke;
  margin-top: 30px;
}
.data {
  display: inline-block;
  font-size: 22px;
  margin-top: 10px;
  margin-left: 30px;
}
<div *ngFor="let item of items" class="nav-li">
  <ul>
    <li class="value" [value]="item.value"><a href="">{{item.value}}</a></li>
  </ul>

</div>

<div class="gallery">
  <div *ngFor="let item of items" class="card">
    <div class="data">{{item.name}}</div>
  </div>
</div>

Upvotes: 0

Views: 861

Answers (2)

Amineze
Amineze

Reputation: 1135

You can filter items by its values

app.component.ts

public items = [{
   value: 'All',
   name: 'All Items'
},
{
   value: 'Photos',
   name: 'Photo Items'
},
{
   value: 'Video',
   name: 'Video Items'
}];

itemsFiltered = this.items;

filterItems(filterBy) {
   if (filterBy == 'All') {
       this.itemsFiltered = this.items;
   } else {
       this.itemsFiltered = this.items.filter(m => m.value === filterBy)
   }
}

app.component.html

<div *ngFor="let item of items" class="nav-li">
   <ul>
     <li class="value" [value]="item.value">
        <a href="javascript:;" (click)="filterItems(item.value)">{{item.value}}</a> 
     </li>
   </ul>
</div>

<div class="gallery">
    <div *ngFor="let items of itemsFiltered" class="card">
      <div class="data">{{items.name}}</div>
    </div>
</div>

Upvotes: 1

Naruto
Naruto

Reputation: 72

<!--Declare 'displayOption' in your ts file-->
  <div *ngFor="let item of items" class="nav-li">
   <ul>
    <li class="value" [value]="item.value">
      <a href="" (click)="displayOption = item.value"> 
       {{item.value}}</a>
    </li>
  </ul>
 </div>

<div class="gallery">
  <div *ngFor="let item of items" class="card">
    <div class="data" *ngIf="displayOption === item.value || displayOption === 'All'> 
      {{item.name}}
    </div>
 </div>

Upvotes: 2

Related Questions