how to show and hide div based on the checkbox selection in Angular 8

Question

I have a checkbox built from an array.

<div class="form-check" *ngFor="let plan of plans; index as i" [formGroupName]="i">
        <label class="form-check-label fw7 h5 mb0">
          <input class="form-check-input" type="checkbox" formControlName="checkbox">
          {{plan.planShortName}}
        </label>
<div>

i need to show and hide a div in the end of the page if the plan.mailingResponsibility is true for any one of the selected plan. by default one of the plan is always selected when the page loads. Any guidance on this of how my approach should be? below is the div i need to show and hide

  <div *ngIf="showFootNote">
        <p>
          * By providing an e-mail address you agree to the terms..
        </p>
      </div>

Here is the sample that i am working on Sample: https://stackblitz.com/edit/angular-pnw2wg?file=src%2Fapp%2Fapp.component.html

So you need to toggle showFootNote state by looking every checkbox change, right? — MonkeyScript
– MonkeyScript, Commented Mar 17, 2020 at 13:32
You have not bind the checkbox input to any variable. Why is that? — MonkeyScript
– MonkeyScript, Commented Mar 17, 2020 at 13:35
yes on the checkbox change .if two checkboxes are selected and one of it has the property mailResponsibility True I need to show the foot note. Also by default one checkbox is already selected when the page loads so i will have to check that one too. i did not bind the checkbox input because it wasnt necessary to get the value of it. I can add should nt be a problem — Margerine
– Margerine, Commented Mar 17, 2020 at 13:47

MonkeyScript · Accepted Answer · 2020-03-17 13:42:36Z

2

First of all showFootNote should be false by default.

showFootNote: boolean = false;

You need to bind the checkbox input to some field. I have added a field isChecked in the Plan interface.

<label>
    <input 
        type="checkbox" 
        [(ngModel)]="plan.isChecked" 
        formControlName="checkbox" 
        (change)="updateState()">
    {{plan.planShortName}}
</label>

Use change event to call a function to update the state of showFootNote.

updateState(){
    // Reset 
    this.showFootNote = false;
    // Itearte over plans 
    this.plans.forEach(
        plan => {
            // If selected and flag is true
            if(plan.isChecked && plan.mailingResponsibility){
                this.showFootNote = true;
            }
        }
    )
}

Demo : https://stackblitz.com/edit/angular-bzcsaw

answered Mar 17, 2020 at 13:42

MonkeyScript

5,1611 gold badge14 silver badges28 bronze badges

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

4 Comments

Margerine Over a year ago

This helps Thanks. But Also by default one checkbox is already selected when the page loads so how to check that one if the property is true or not?

MonkeyScript Over a year ago

Which one will be checked? The first one? Set its value while intializing plans.

MonkeyScript Over a year ago

Does this meet your requirement : https://stackblitz.com/edit/angular-bzcsaw

Barremian Over a year ago

All looks good except if the checkbox selected initially has mailingResponsibility true, the footnote won't be displayed since the event handler hasn't been triggered yet. To solve it, it can be triggered once in ngOnInit(). See here: stackblitz.com/edit/angular-853wzd

Collectives™ on Stack Overflow

how to show and hide div based on the checkbox selection in Angular 8

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related