Close NbWindowService from Button Click

Question

I have a component that opens a NbWindowService:

<button nbButton (click)="openWindow()"  status="primary" size="small" >Confirm</button>

This button calls this function from the page.component.html and then in the page.component.ts:

openWindow() {

if (this.windowToggle = true ){
  this.windowRef = this.windowService.open(WindowComponent, {title: this.currentItem.name});
  
} 
else {this.validationId = 'show';}
}

Then inside of the open window. I want a button that lets me cancel the opening of the window. This is the window.component.html:

<button nbButton (click)="buttonClose()" status="primary" size="small" >Cancel</button>

This is the window.component.ts:

buttonClose() {
this.window.close();}

Now, I know that I can't close a window outside of the component that called it. But how do I get that button to call a method to close the window from within the pop-up window?

so you want to close the window from inside the pop-up right — Baskaran Ajiharan, Mar 16 '21 at 02:50
can you check the official documentation? I think the answer was already in there — Baskaran Ajiharan, Mar 16 '21 at 03:04
@BaskaranAjiharan, I have been through most of it and found nothing that fits my exact use case but I will check again. Basically I just need a way to call a function from my original component to use the this.windowRef.close() method. — JLAdams, Mar 16 '21 at 03:07

Baskaran Ajiharan · Answer 1 · 2021-03-16T04:35:26.717

you can close the popUp from inside or outside

close from inside

 //main component
    

     import { Component } from '@angular/core';
    import { NbDialogService } from '@nebular/theme';
    import { TskPopupComponent } from './tsk-popup/tsk-popup.component';
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss'],
    })
    export class AppComponent {
      title = 'angularForms';
      dialogref: any;
      constructor(private dialogService: NbDialogService) {}
      open() {
        this.dialogService.open(TskPopupComponent, {
          hasBackdrop: false,
        });
      }
    
     
    }
    
    //popup component
    import { Component, OnInit } from '@angular/core';
    import { NbDialogRef } from '@nebular/theme';
    import { AppComponent } from '../app.component';
    
    @Component({
      selector: 'app-tsk-popup',
      templateUrl: './tsk-popup.component.html',
      styleUrls: ['./tsk-popup.component.scss'],
    })
    export class TskPopupComponent implements OnInit {
      constructor(protected dialogRef: NbDialogRef<any>) {}
    
     close() {
        this.dialogRef.close();
      }
      ngOnInit(): void {}
    }

In this case, you can close your component from outside(close popup from any component) but it's a temporary solution

//service.component

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class PopupServiceService {
  private modalClosed = false;

  private messageSource = new BehaviorSubject(this.modalClosed);
  public checkModal: Observable<any> = this.messageSource.asObservable();

  checkModalClose(isClose: boolean) {
    this.messageSource.next(isClose);
  }

  constructor() {}
}

//main component
import { Component } from '@angular/core';
import { NbDialogService } from '@nebular/theme';

import { PopupServiceService } from './popup-service.service';
import { TskPopupComponent } from './tsk-popup/tsk-popup.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'angularForms';
  dialogref: any;
  constructor(
    private dialogService: NbDialogService,
    private popupService: PopupServiceService
  ) {}
  open() {
    this.dialogref = this.dialogService
      .open(TskPopupComponent, {
        hasBackdrop: false,
      })
      .onClose.subscribe((res) => {
        console.log('closed');
        this.popupService.checkModalClose(false);
      });
  }
  close() {
    this.popupService.checkModalClose(true);
  }
}

//popup component
import { Component, OnDestroy, OnInit } from '@angular/core';
import { NbDialogRef } from '@nebular/theme';
import { Subscription } from 'rxjs';
import { AppComponent } from '../app.component';
import { PopupServiceService } from '../popup-service.service';

@Component({
  selector: 'app-tsk-popup',
  templateUrl: './tsk-popup.component.html',
  styleUrls: ['./tsk-popup.component.scss'],
})
export class TskPopupComponent implements OnInit, OnDestroy {
  private sub = new Subscription();
  constructor(
    protected dialogRef: NbDialogRef<any>,
    private popupService: PopupServiceService
  ) {}

  close() {
    this.dialogRef.close();
  }

  ngOnInit(): void {
    this.sub.add(
      this.popupService.checkModal.subscribe((res) => {
        if (res === true) {
          this.close();
        }
      })
    );
  }
  ngOnDestroy(): void {
    this.sub.unsubscribe();
  }
}

Close NbWindowService from Button Click

1 Answers1