How to show div if checkbox is checked?

Ionic Framework ionic-v3
1

Hi,

I’m getting a problem that how to show div if “color” checkbox is checked. And yes by default color-boxes div will be hide.

I tried to add ng-show but it is not working.

<ion-checkbox [(ngModel)]="color"></ion-checkbox>

<div class="color-boxes">
   <button color="light" ion-button small>Red</button>
   <button color="light" ion-button small>Green</button>
   <button color="light" ion-button small>Yellow</button>
   <button color="light" ion-button small>Blue</button>
</div>

Best Regards

2

Anyone there to answer?

3 
<ion-checkbox (click)="color='show'"></ion-checkbox>

<div class="color-boxes" [ngClass]='color'>
   <button color="light" ion-button small>Red</button>
   <button color="light" ion-button small>Green</button>
   <button color="light" ion-button small>Yellow</button>
   <button color="light" ion-button small>Blue</button>
</div>

in your SCSS


.color-boxes {
display: none;
}

.show {
display: inline !important;
}

This will show your color-boxes div once a user clicks on check box.

4

Thanks man! It is working but when it is unchecked then it keeps showing the div.

5

Thanks man! It is working.

6

Try to make (click)="" as boolean

(click)="isActive = !isActive"

so every time you click on button, it will change boolean state & add and remove class which is isActive
<div [ngClass]="{'display: inline': isActive}">

in your .TS file

isActive: boolean = false;

7

Thanks a lot man! It is working.

1 Like