Angular Communication Parent/Child in modals problem

Question

I'm still learning how do components communicate between them, so I have my parentView, inside it had a modal with the components of vmware-clarity, but in my work, they told me to move it to a separate component.

parentView(Before)

<button class="btn btn-cris" (click)="confirm=true">Create Project</button>
<clr-modal [(clrModalOpen)]="confirm">
    ///modal Content
</clr-modal>

I change it to: parentView:

<button class="btn btn-cris" (click)="confirm=true">Create Project</button>
<app-myModal [confirm]="confirm"></app-myModal>

modalView.html:

<clr-modal [(clrModalOpen)]="confirm">
    ///modal Content
</clr-modal>

modalView.ts:

export class QSubInitialProcessComponent implements OnInit {
    @Input('confirm') confirm: boolean;

    constructor() { }

    ngOnInit() {
    }

}

But now when I close the modal with the default "x" button, I can't reopen it, when it was only one component you could close it and opened it.

I'm guessing it has something to do with parent and child communication, but I'm not quite sure. As far as I know, the "x" button that comes by default with the clarity component changes the value automatically

Answer 1

You're certainly on the right track here. I believe your issue lies here:

<app-myModal [confirm]="confirm"></app-myModal>

This is a one-way binding from your parent to your new modal view component. When your clr-modal changes this flag to false for your modal view, your parent likely still thinks it true.

What you need to do is introduce two-way binding to your intermediate modal view. You can do this with a simple addition to the modal view:

@Input('confirm') confirm: boolean;
@Output() confirmChange = new EventEmitter<boolean>();

Then, associate your two-way binding with your parent automatically by using a banana-in-a-box:

<app-myModal [(confirm)]="confirm"></app-myModal>

The banana-in-a-box is just syntactic sugar for using your Input and Output at the same time. For more info, see the official guide: https://angular.io/guide/template-syntax#basics-of-two-way-binding

If the above is not enough to solve the problem, it could also be that you're two-way-bound with confirm from the clr-modal's output. You can try unboxing the association like this:

<clr-modal [clrModalOpen]="confirm" (clrModalOpenChange)="confirmChange.emit($event)">
    ///modal Content
</clr-modal>

I would expect then that your modal view component would then truly act as a passthrough for the actual modal's open state.