Toggle Show/Hide DIV on Button Click using Angular

Toggle Div based on Button Click using Angular

How to Solve:

In this article I will explain with an example, how to Toggle Show/Hide DIV on Button Click using Angular

When the Button is clicked, the HTML DIV will be shown and when again the same button is clicked the HTML DIV will be hidden.

The HTML Markup consists of a HTML Button and an HTML DIV. The Button has been assigned a angular Click event handler. We put click event method on typescript file

Use the Code:

<button type="button" (click)="onClick()"> Toggle Div </button> 

<div *ngIf="isShow">Hi div is shown</div>

Typescript code consist a boolean variable. When the button is clicked, based on value of variable  i.e./ True or False, the HTML DIV will be toggled 

export class DemoComponent implements OnInit() {
  isShow: boolean

  constructor() {}

  ngOnInit() {}

  onClick() {
    this.isShow = !this.isShow;
  }
}

Result: