How to close dialog Angular 9 ngx admin

Question

Solutions found in StackOverflow showing call ref.close() method, but in ref there no method named close. How to close this dialog and now I am calling ref.destroy() and it is closing the dialog but it is showing a overly and if user click on that window it hides.

import { Component, Input, Output, EventEmitter, ComponentRef } from '@angular/core';
import { BlogCaredWithImageText } from '../module/BlogCaredWithImageText.model';
import { NbDialogService, NbDialogRef } from '@nebular/theme';
import { ButtonSettingComponent } from '../button-setting/button-setting.component';
import { TemplateRef } from '@angular/core';

@Component({

    selector: 'blog-item',
    templateUrl: 'blog-item.component.html',
    styleUrls: ['blog-item.component.scss']
})
export class BlogItemComponent {
    placeholder = "./assets/millastudio/imageplaceholder/1.png";
    @Input() data: BlogCaredWithImageText = new BlogCaredWithImageText();
    @Input() fontSize = "6";
    @Input() lineHeight = 1;
    @Input() margin = "0.5px";
    @Input() makePreview = false;
    @Output() mouseLeave: EventEmitter<void> = new EventEmitter();
    @Output() mouseEnter: EventEmitter<void> = new EventEmitter();
    @Output() editMe: EventEmitter<void> = new EventEmitter();

    showEditButton = false;
    editMeUpdate() {
        this.editMe.emit();
    } @Output() deleteMe: EventEmitter<void> = new EventEmitter();

    deleteMeUpdate() {
        this.deleteMe.emit();
    }
    @Input() enableMouseEnter = true;
    ///  if (this.enableMouseEnter == true)
    constructor( private dialogService: NbDialogService){

    }
    mouseLeaveUpdate() { 
        if (this.enableMouseEnter == true)
            if (this.makePreview == false) {
                this.showEditButton = false;
                console.log("mouseLeave ");
                this.mouseLeave.emit();
            }

    }
    mouseEnterUpdate() {
        if (this.enableMouseEnter == true)
            if (this.makePreview == false) {
                this.showEditButton = true;
                console.log("mouseEnter ");
                this.mouseEnter.emit();
            }
    }
    getImage(): string {

        if (this.data.img[0].includes(".jpg") || this.data.img[0].includes(".png") || this.data.img[0].includes(".webp") || this.data.img[0].includes(".jpeg")) {
            return this.data.img[0];
        }
        else {
            return this.placeholder;
        }

    }

    mouseEnterOnButtonUpdate(index){
        this.data.button[index].showSetting=true;
    }
    
    mouseLeaveOnButtonUpdate(index){
        this.data.button[index].showSetting=false;
    }

    setupButton(index){
          
   let ref :  ComponentRef<ButtonSettingComponent> =  this.dialogService.open(ButtonSettingComponent).componentRef;
  ref.instance.btColor= this.data.button[index].color;
  ref.instance.btAction=   this.data.button[index].action;
  ref.instance.btContent=     this.data.button[index].content;
  ref.instance.buttonText=     this.data.button[index].text;
  ref.instance.removeLisiner.subscribe(()=>{
    this.data.button.splice(index,1);
    ref.destroy();
  });
  ref.instance.close.subscribe(()=>{
    ref.destroy();
    
  });
 
   ref.instance.finish.subscribe(()=>{
        this.data.button[index].color=ref.instance.btColor;
        this.data.button[index].action=ref.instance.btAction;
        this.data.button[index].content=ref.instance.btContent;
        this.data.button[index].text =ref.instance.buttonText;
        alert(this.data.button[index].color);
        ref.destroy();
    });
  
}

}

Answer 1

Because you are trying close ref which is not the proper way.

constructor(protected dialogRef: NbDialogRef) {
}

this.dialogService.open(MyDialogComponent, { ... });

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