Showing a div based on button click

Question

I'm trying to show a div based on whether button is clicked or not, however this doesn't seem to be working.

Component HTML

<button ng-click="showFormToggle()">Click</button>

<div ng-show="showForm">

</div>

I've also tried

<button (click)="showFormToggle()">Click</button>

<div *ngIf="showForm">

</div>

Component Typescript

 showForm: boolean = false;

 showFormToggle(){
    this.showForm = true;
    console.log(this.showForm);
  }

Your div is actually empty, You won't be able to know if it worked or not — sic-sic, May 22 '18 at 14:04
By visual inspection, you could not tell, but if it worked, the div would be present in an inspector. — Geoff Lentsch, May 22 '18 at 14:09
Possible duplicate of [Show / Hide - Content on Button Click](https://stackoverflow.com/questions/43180943/show-hide-content-on-button-click) — Muhammed Albarmavi, May 22 '18 at 14:26

score 1 · Accepted Answer · answered May 22 '18 at 14:06

Based on your Component HTML, you may be confused as the version of Angular you are using. I am assuming you are intending to use Angular2+, considering your naming convention (Component vs Controller), and therefore the first example no longer works (That is AngularJS). component.ts

showForm : boolean = false;

component.html

<button (click)="showForm = !showForm">Click</button>
<div *ngIf="showForm">
</div>

or

<button (click)="showForm = !showForm">Click</button>
<div [hidden]="!showForm">
</div>

Please confirm what you are using, Angular 2+ or AngularJS.

score 0 · Answer 2 · answered May 22 '18 at 14:04

in your html:

<button (click)="showFormToggle()">Click</button>

            <div *ngIf="isChecked">
                Clicked!
            </div>

in your ts file, before the constructor:

isChecked = false;

and your function:

showFormToggle(){
    this.isChecked = !this.isChecked;
}

I hope it is what you are looking for!

Showing a div based on button click

2 Answers2