title: How to close dialog Angular 9 ngx admin
body: <p>Solutions found in StackOverflow showing call <code>ref.close()</code> method, but in ref there no method named close. How to close this dialog and now I am calling <code>ref.destroy()</code> and it is closing the dialog but it is showing a overly and if user click on that window it hides.</p>
  <p><a href="https://i.stack.imgur.com/8OEbK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8OEbK.png" alt="ngx-admin close dialog" /></a></p>
  <pre><code>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 = &quot;./assets/millastudio/imageplaceholder/1.png&quot;;
      @Input() data: BlogCaredWithImageText = new BlogCaredWithImageText();
      @Input() fontSize = &quot;6&quot;;
      @Input() lineHeight = 1;
      @Input() margin = &quot;0.5px&quot;;
      @Input() makePreview = false;
      @Output() mouseLeave: EventEmitter&lt;void&gt; = new EventEmitter();
      @Output() mouseEnter: EventEmitter&lt;void&gt; = new EventEmitter();
      @Output() editMe: EventEmitter&lt;void&gt; = new EventEmitter();
  
      showEditButton = false;
      editMeUpdate() {
          this.editMe.emit();
      } @Output() deleteMe: EventEmitter&lt;void&gt; = 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(&quot;mouseLeave &quot;);
                  this.mouseLeave.emit();
              }
  
      }
      mouseEnterUpdate() {
          if (this.enableMouseEnter == true)
              if (this.makePreview == false) {
                  this.showEditButton = true;
                  console.log(&quot;mouseEnter &quot;);
                  this.mouseEnter.emit();
              }
      }
      getImage(): string {
  
          if (this.data.img[0].includes(&quot;.jpg&quot;) || this.data.img[0].includes(&quot;.png&quot;) || this.data.img[0].includes(&quot;.webp&quot;) || this.data.img[0].includes(&quot;.jpeg&quot;)) {
              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&lt;ButtonSettingComponent&gt; =  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(()=&gt;{
      this.data.button.splice(index,1);
      ref.destroy();
    });
    ref.instance.close.subscribe(()=&gt;{
      ref.destroy();
      
    });
   
     ref.instance.finish.subscribe(()=&gt;{
          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();
      });
    
  }
  
  }
  </code></pre>