div toggle on checkbox checked and unchecked angular 6

Question

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

You can use *ngIf for that. Something like *ngIf="!checked". — josip
– josip, Commented Mar 22, 2019 at 10:18
i tried but its not working.. can you please post how should i implement — Vivekananda Rath
– Vivekananda Rath, Commented Mar 22, 2019 at 10:21
Please refer this link may be it's help you stackoverflow.com/questions/50946102/toggle-div-with-angular-6 — Rani Thakur
– Rani Thakur, Commented Mar 22, 2019 at 10:51

Shriniwas b · Accepted Answer · 2019-03-22 10:44:15Z

1

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>

answered Mar 22, 2019 at 10:44

Shriniwas b

3361 gold badge3 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

div toggle on checkbox checked and unchecked angular 6

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related