ngx-vt-modal

NgxVtModal - minimalist and zero-dependency library

This library was generated with Angular CLI version 12.1.2.

• mobile friendly
• easy adaptive

This modal is just container. You can off the predefined header and totally customized design of the modal window.

Demo

https://non4me.github.io/ngx-vt-modal/

Instalation

Run ng install ngx-vt-modal

Add to app.module.ts:

import { NgxVtModalModule } from 'ngx-vt-modal';
...
imports: [
    NgxVtModalModule.forRoot({...defaultOptions}),
    ...
]

Usage

// Modal opener component or service
constuctor(
    private modalService: NgxVtModalService;
){}

openModal(): void {
  this.modalService.open(DialogComponent);
}

// or

openModal(): void {
  const modalRef = this.modalService.open(DialogComponent, {
    size: NgxVtModalSize.SMALL,
    useEsc: true,
    data: {...any}
  });

  // build-in Event closeModal$
  modalRef.closeModal$
    .subscribe(data => {
        if(data?.result === 'OK') {
            // do anything
        }
    });
  
  // or your custom Event
  modalRef.myCustomEvent$
    .subscribe(data => {
      // do anything
    });
}

@Component({
  ...
})
export class DialogComponent{
  @Input() data; // data from NgxVtModalOptions object
  
  @Output() myCustomEvent$ = new EventEmitter();

  constuctor(
    private modalService: NgxVtModalService
  ){}
  
  onDismiss(): void {
      this.modalService.close();
  }
  
  onClose(): void {
    this.modalService.close({result: 'OK', ...data}) 
    
    // or with custom Event
    this.myCustomEvent$.next({...data});
    this.modalService.close();
  }
  
}

Options