模态窗口关闭功能不起作用

Question

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

Answer 1

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();
  }