Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 74325

How to disable other divs coming from loop except the clicked one

$
0
0

I have some li tags whose data is coming from loop,When I click any li tag it will active by changing its image and will store into localstorage so that on refresh also clicked one should be active,Here when we click, an active object is adding to json to clicked li tag and stores into localstorage. Now the problem is When I click again on clicked li tag or outside its toggling the earlier image,that should not be. Again other li tag should be disable except clicked one.Here is the code below https://stackblitz.com/edit/angular-skzgno?file=src%2Fapp%2Fapp.component.ts

app.component.html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<div>
    <pre>

  </pre>
    <ul>
<li *ngFor="let item of statusdata" (click)="toggleActive(item, !item.active)">
  <span>{{item.id}}</span>
  <span>{{item.name}}</span>
  <span>
    <img *ngIf="!item?.active || item?.active === false" src ="https://dummyimage.com/qvga" />
    <img *ngIf="item?.active === true" src ="https://dummyimage.com/300.png/09f/fff" />
  </span>
</li>
    </ul>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  statusdata: any;

  ngOnInit() {
    this.statusdata = [
      { id: 1, name: "Angular 2" },
      { id: 2, name: "Angular 4" },
      { id: 3, name: "Angular 5" },
      { id: 4, name: "Angular 6" },
      { id: 5, name: "Angular 7" }
    ];

    this.statusdata.forEach(item => {
      this.getCacheItemStatus(item);
    });
  }

  toggleActive(item, activeStatus = true) {
    item.active = activeStatus;
    localStorage.setItem(`item:${item.id}`, JSON.stringify(item));
  }

  getCacheItemStatus(item) {
    const cachedItem = localStorage.getItem(`item:${item.id}`);
    if (cachedItem) {
      const parse = JSON.parse(cachedItem); // Parse cached version
      item.active = parse.active; // If the cached storage item is active
    }
  }
}

Viewing all articles
Browse latest Browse all 74325

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>