Use Internal Buttons to close the modal

[Robert L Collins Jr]

Hello! I've been seeking to see how your modal module would work in an app I am building and have liked what I've seen so far!

One question I do have is the modal is being used as a form with validation that takes place in the view, is there a way to hook up my Ok and cancel buttons in the modal to dismiss the view when it is done with validation?

[Gerard Rovira]

Yes!

Once you have the #reference set on your HTML view that's all you need in your component to control the modal.

https://github.com/zurfyx/angular-custom-modal/blob/master/example/app/app.component.ts#L25

import { ModalComponent } from 'angular-custom-modal';
ViewChild('componentInsideModal') componentInsideModal: ModalComponent;

this.componentInsideModal.open();
this.componentInsideModal.close();

In your outer component calling the this.componentInsideModal.close() is all you need.

In the inner component you will have to pass in the reference to that modal first. You can do a sort of <app-my-inner-component [modal]="modalReference"></app-my-inner-component>

[Robert L Collins Jr]

Awesome, thanks for the quick response. I tried to use EventEmitter to handle sending data between my child component and the one launching it, but that doesn't seem to be working. Is that expected behavior or should the event emitter still be able to pass data from the child to the parent?

[Gerard Rovira]

Hm, I haven't tested it, but I don't see why it shouldn't be working right now.

I guess you're having something like that right?

<app-child-component (event)="onCompleted()"></app-child-component>

parent.component.ts

onCompleted() {}

child.component.ts

@Output() event: EventEmitter<void> = new EventEmitter<void>();

foo() {
  this.event.emit();
}