How to close a modal programmatically from TS about ngx-materialize HOT 1 CLOSED

Hi @bakoserge,

The MzModalComponent exposes 2 methods: open and close as specified on the documentation (see Methods section on bottom of the page). So to access those methods from your component and trigger close method programmatically you will need to add a template reference variable on the mz-modal component in your HTML template and access the modal by using @ViewChild decorator.

modal-example.component.html

Notice the #modal variable added on the mz-modal element tag.

<mz-modal #modal>
  <mz-modal-header>
    Modal Title
  </mz-modal-header>
  <mz-modal-content>
    Modal Content
  </mz-modal-content>
  <mz-modal-footer>
    <button mz-button [flat]="true" (click)="close()">Close</button>
  </mz-modal-footer>
</mz-modal>

modal-example.component.ts

Using @ViewChild decorator with the template reference variable name will retreive the instance of the modal component. Type your property with MzModalComponent for typescript intellisense. Now you can just invoke the close method from the component reference.

import { Component, ViewChild } from '@angular/core';
import { MzModalComponent, MzBaseModal } from 'ng2-materialize';

@Component({...})
export class ModalExampleComponent extends MzBaseModal {
  @ViewChild('modal') modal: MzModalComponent;

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

from ngx-materialize.