CODEWITHSUNDEEP
angular6
Vivekananda Rath
Vivekananda Rath

Reputation: 15

div toggle on checkbox checked and unchecked angular 6

component.html

<div class="col-lg-6">
    <div class="form-check position-absolute">
        <input type="checkbox" class="form-check-input" id="exampleCheck1" [checked] = true >
    </div>
    <app-stackbar-chart [data]="exp_month_data"></app-stackbar-chart>
    <app-stackbar-chart [data]="exp_data_performance"></app-stackbar-chart>
</div>

question description

I want to toggle these two divs(app-stackbar-chart) on check and uncheck of that checkbox

Upvotes: 1

Views: 2909

Answers (1)

Shriniwas b
Shriniwas b

Reputation: 336

component.ts

//declare variable for chacked/unchecked

isChecked:boolean = true;

component.ts

<div class="col-lg-6">
    <div class="form-check position-absolute">
        <input type="checkbox" (change)="isChecked =! isChecked" class="form-check-input" id="exampleCheck1" [checked] = true >
    </div>
    <app-stackbar-chart *ngIf="isChecked" [data]="exp_month_data"></app-stackbar-chart>
    <app-stackbar-chart *ngIf="!isChecked" [data]="exp_data_performance"></app-stackbar-chart>
</div>

Upvotes: 1

Related Questions