How to dynamic change property value with ngFor loop using click method

Question

I have a TypeScript file below:

<md-card style="display: inline-block;" *ngFor="let people of peoples">
    <p>
      {{people.name}}
    </p>
    <p *ngIf="people.showAge">
      {{people.age}}
    </p>
    <button md-button (click)="showHide()">Click me!</button>
</md-card>

and class Component:

export class PeopleComponent implements OnInit {
showHide() {

  }
peoples: People[] = [
    new People('John', 26),
    new People('Mary', 30),
    new People('Max', 15)]
}

This below is model class.

export class People {
  public showAge: boolean;

  constructor(public name: string, 
              public age: number,
              ){}
}

And now how can I implement showHide() method in PeopleComponent when I click the button then age will be show and hide alternately? I'm working with Angular 4.

Faly · Accepted Answer · 2017-09-15 09:14:22Z

1

You already have a showAge property in the People class so...

<md-card style="display: inline-block;" *ngFor="let people of peoples">
    <p>
      {{people.name}}
    </p>
    <p *ngIf="people.showAge">
      {{people.age}}
    </p>
    <button md-button (click)="people.showAge = !people.showAge">Click me!        
</button>
</md-card>

export class People {
      public showAge: boolean = false;
      constructor(public name: string, public age: number){}
}

edited Sep 15, 2017 at 9:14

answered Sep 15, 2017 at 9:08

Faly

13.4k2 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to dynamic change property value with ngFor loop using click method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related