angularmodal-window

The modal window close function does not work


I made a simple project on angular. In this project, I implemented a modal window.

My problem is that when the modal window is open, the function that closes the window does not work, but when I click on the button again to open the modal window, it closes. And even when I call the close function from the open function, it works too.

Why does the modal window close function not work?

Link to the created project

https://stackblitz.com/edit/angular-zmytwj


Solution

  • constructor(private overlay: Overlay, private viewContainerRef:ViewContainerRef) {}
    

    Should add viewContainerRef when initialize component

    ngOnInit() {
        this.overlayRef = this.overlay.create({ hasBackdrop: true });
        this.formComponentPortal = new ComponentPortal(FormComponent, this.viewContainerRef);
      }
    

    And your close button event

     public onButtonClose() {
         this.overlayRef.detach();
      }