Here is a TypeScript file I am working with:
<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>
Accompanied by the class Component:
export class PeopleComponent implements OnInit {
showHide() {
}
peoples: People[] = [
new People('John', 26),
new People('Mary', 30),
new People('Max', 15)]
}
This next section defines the model class.
export class People {
public showAge: boolean;
constructor(public name: string,
public age: number,
){}
}
My challenge now is to implement the showHide() method in PeopleComponent using Angular 4. The goal is to toggle the visibility of the age when clicking the button. How can this be achieved?