CODEWITHSUNDEEP
angular
Luca
Luca

Reputation: 299

How to display div under button if this one is clicked? Angular 2

I would like to show a div under a button when this one is clicked

I'm working in Angular 2 I would like to use functions like *ngIf and (click) but I don't know where to start doing that.

Inside my button I have (click)="show=!show" and inside my hidden div, I have <div *ngIf="show">{{baseColor.name}}</div>.

In my export class{} function I have show = false;

EDIT:

Best way

I have already my selected method [ngClass]="{'selected': baseColor.state.selected}so I have put inside my div *ngIf="baseColor.state.selected"

So now I have <div *ngIf="baseColor.state.selected">{{baseColor.name}}</div> without any extra code.

Upvotes: 0

Views: 340

Answers (1)

Sourav Golui
Sourav Golui

Reputation: 633

In Component.ts

is_show = false;
toggleDiv() {
    this.is_show = !this.is_show;
}

In Html

<button (click)="toggleDiv()">Show / Hide</button>
<div *ngIf="is_show"></div>

Upvotes: 1

Related Questions