I am using Angular which has a modal dialog which then has checkboxes. I am unable to make the checkboxes remember their selection

Question

I am using Angular which has a modal dialog which then has checkboxes. I am trying to make the checkboxes remember the selection but unable to do so. Here's my HTML template below: I don't want to include jQuery as another package in my modules. Can any one please assist? Let me know if you need any other piece of code from my project. I am just trying to be short and precise

<mat-checkbox (change)="AllItemsChange($event) "[(checked)]="selectAllItems">{{this['groupType'] | pluralize}}</mat-checkbox>
      </mat-header-cell>
      <mat-cell *matCellDef="let group"> 
        <mat-checkbox [(ngModel)]=group.selected>{{group.name}}</mat-checkbox>

Answer 1

Following approach can get you there. I can't write the exact code as I would need to setup an Angular app but if you know @Input()/@Output() directives, I believe you can do it.

There are two components here.

1. Your current page -- You need to create a property (propA) that would store the selection bool of your checkbox in modal page.
2. Your modal page - Here, again, you need to have an input(this property is ngModel bound to your checkbox) and a output property.

When you click on modal open button from your main page, pass this value (propA) to the modal data, since initially it would be false, your modal checkbox will take its value and wont get checked. Now when you check it, or again uncheck it, your output property (which is basically like events -- button click, focus ) will get triggered and return the check/uncheck value back to your parent component and will get saved in propA.

Now when user closes the modal, and again tries to open it, the propA will have check/uncheck value and your modal checkbox would behave as it is intended.