CODEWITHSUNDEEP
angular
Kazi
Kazi

Reputation: 1553

How to reference a particular element which is created by ngfor in angular?

I have created several div through ngfor directive. 

<div class="card" *ngFor="let item of list" [ngClass]="{'is-collapsed': isCollapsed , 'is-expanded':!isCollapsed}"  (click)="toggle()">
        <div class="card__inner " [ngClass]="{'js-expander': isCollapsed}">
          <span>Card</span>
          <mat-icon class="fa fa-folder-o">folder</mat-icon>
        </div>
        <div class="card__expander">
          <mat-icon class="fa fa-close" [ngClass]="{'js-collapser': isCollapsed}" >close</mat-icon>
          Expander
        </div>
      </div>

Now if i click on toggle function it should expand the particular div only. But it expand all the div. How can fix it? here is my toggle fucntion look like: 

 isCollapsed: boolean;
  list = [{a:1},{a:1},{a:1}]
  constructor() { }

  ngOnInit() {
    this.isloading = true;
    this.isCollapsed = true;
  }

  toggleIsCollapsed() {
    this.isCollapsed = !this.isCollapsed;

  }

How can i reference a particular which will expand based on click? what modification should i do?

Upvotes: 2

Views: 349

Answers (2)

Sam
Sam

Reputation: 1861

Why not write a directive to toggle a class on the element? Then you can reuse it throughout passing the class as an input.

import {Directive, ElementRef, Input} from '@angular/core';

@Directive({
    selector: '[toggle-class]',
    host: {
        '(click)': "toggleClass()"
    }
})
export class ToggleClassDirective {

    @Input() toggle_class: string = 'is-collapsed';

    private el:ElementRef;

    constructor(el: ElementRef) {
        this.el = el;
    }

    toggleClass() {
        this.el.nativeElement.classList.toggle(this.toggle_class);
    }
}

Then in your HTML 

<div class="card" toggle-class toggle_class="is-collapsed"></div>

Upvotes: 1

Adrita Sharma
Adrita Sharma

Reputation: 22213

Try like this:

<div class="card" *ngFor="let item of list; let i=index"
    [ngClass]="{'is-collapsed': item.isCollapsed , 'is-expanded':!isCollapsed}"
    (click)="item.isCollapsed = !item.isCollapsed ">
    <div class="card__inner " [ngClass]="{'js-expander': item.isCollapsed}">
        <span>Card</span>
        <mat-icon class="fa fa-folder-o">folder</mat-icon>
    </div>
    <div class="card__expander">
        <mat-icon class="fa fa-close" [ngClass]="{'js-collapser': item.isCollapsed}">close</mat-icon>
        Expander
    </div>
</div>

Upvotes: 1

Related Questions