title: How to dynamic change property value with ngFor loop using click method
body: <p>I have a TypeScript file below:</p>
  
  <pre><code>&lt;md-card style="display: inline-block;" *ngFor="let people of peoples"&gt;
      &lt;p&gt;
        {{people.name}}
      &lt;/p&gt;
      &lt;p *ngIf="people.showAge"&gt;
        {{people.age}}
      &lt;/p&gt;
      &lt;button md-button (click)="showHide()"&gt;Click me!&lt;/button&gt;
  &lt;/md-card&gt;
  </code></pre>
  
  <p>and class Component:</p>
  
  <pre><code>export class PeopleComponent implements OnInit {
  showHide() {
  
    }
  peoples: People[] = [
      new People('John', 26),
      new People('Mary', 30),
      new People('Max', 15)]
  }
  </code></pre>
  
  <p>This below is model class.</p>
  
  <pre><code>export class People {
    public showAge: boolean;
  
    constructor(public name: string, 
                public age: number,
                ){}
  }
  </code></pre>
  
  <p>And now how can I implement <code>showHide()</code> method in PeopleComponent when I click the button then age will be show and hide alternately? I'm working with Angular 4.</p>