I have created a child component that contains 3 checkboxes, generated dynamically using ngFor, along with Apply and Cancel buttons.
In the parent template, I include the selector tag for the child component. The parent component accesses this child component using @ViewChild and calls the present() method with an object argument to update the checked state of the checkboxes.
Each time the modal is displayed, the present() method is called. Initially, the checkboxes are updated based on the values sent by the parent component. However, subsequent calls to present() do not reflect the updated checkbox values in the UI. I want the checkboxes to be checked or unchecked based on the value sent by the parent each time the modal is displayed.
Here is an example:
@ViewChild(childModalComponent) childModalComponent: ChildModalComponent;
onBtnClick() {
this.childModalComponent.present({
checkbox1: true,
checkbox2: false,
checkbox3: false
});
}
Below is how the components are structured:
<feature-child-modal></feature-child-modal>
In the child component, the options are initialized with labels and values. The present() method updates the checked state of each option based on the input object from the parent:
@ViewChild('childModal') childModal: ElementRef;
ngOnInit() {
this.options = [
{
label: 'label1',
value: 'value1',
checked: false,
},
{
label: 'label2',
value: 'value2',
checked: false,
},
{
label: 'label3',
value: 'value3',
checked: false,
},
];
}
present(optionsState: CompressTransactionType) {
this.options.forEach(item => {
if(item.value == "value1"){
item.checked = optionsState.checkbox1;
}
if(item.value == "value2"){
item.checked = optionsState.checkbox2;
}
if(item.value == "value3"){
item.checked = optionsState.checkbox3;
}
});
this.childModal.nativeElement.present();
}
dismiss() {
this.childModal.nativeElement.dismiss();
}
The child component's HTML template displays the checkboxes based on the options array:
<div *ngFor="let option of options">
<input
type="checkbox"
[value]="option.value"
(change)="onOptionsSelectChanged($event)"
[checked]="option.checked" />
</div>