Angular 2 - Click to show and hide

Source: https://stackoverflow.com/questions/43544910/angular-2-click-to-show-and-hide

You could use a function to change from true to false and vice versa instead of just setting showHidetrue each time you click the button.

To do so you need to create a function e.g. changeShowStatus to change the value of showHide.

changeShowStatus(){
    this.showHide = !this.showHide;
  }

Then you call this function every time you hit the button by changing your showHide=true to changeShowStatus():

<button type="button" (click)="changeShowStatus()">show/hide</button>

To set the initial status you could set the showHide value in the constructor and define showHide just as boolean:

export class App {
  ...
  showHide: boolean;

  constructor() {
    this.showHide = true;
  }
  ...
}