@mr-samani/ngx-dialog

NgxDialog

🎉 Open angular component as a dialog(popup) in Angular Framework without Cdk Material

📦Demo

🚀demo

Install

• NPM: npm i @mr-samani/ngx-dialog
• YARN: yarn add @mr-samani/ngx-dialog

Usage

Import NgxDialogModule to your working module

import { NgxDialogModule } from  'ngx-dialog';

@NgModule({
  imports: [
    NgxDialogModule 
  ]
})
export class AppModule { }

For open dialog

import { Component, OnInit } from '@angular/core';
import { NgxDialogService } from 'ngx-dialog';
import { ModalComponent } from './modal/modal.component';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {

  constructor(
    private ngxDialog: NgxDialogService
  ) { }

  ngOnInit(): void {
  }


  openDialog() {
    this.ngxDialog.open(ModalComponent, {
      data: {
        a: 123
      },
      containerClass: 'my dialog ',
      allowCloseOnOutsideClick: true,
      maxWidth: '80%',
      maxHeight: '80%'
    }).afterClosed.subscribe((r: any) => {
      console.log('closed result=', r);
    });
  }

}

Modal component

import { JsonPipe } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { NgxDialogConfig, NgxDialogRef, NgxDialogService } from 'ngx-dialog';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {
  data: any;
  constructor(
    public config: NgxDialogConfig, 
    public dialogRef: NgxDialogRef,
    private ngxDialog: NgxDialogService
  ) {
    this.data = config.data;
  }

  ngOnInit(): void {
  }

  ok() {
    alert('param=' + new JsonPipe().transform(this.data));
  }

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


  openNewDialog() {
    this.ngxDialog.open(ModalComponent, {
      data: {
        a: this.data.a + 1
      }
    }).afterClosed.subscribe((r: any) => {
      console.log('child closed result=', r);
    });
  }

}

Modal html

<div ngx-dialog-header [showCloseButton]="true">
    header
</div>
<div ngx-dialog-body>
    <p>modal works!</p>
    {{data|json}}
</div>
<div ngx-dialog-footer [align]="'space-between'">
    <div>
        <button (click)="ok()" type="button" class="btn btn-primary mx-1">ok</button>
        <button (click)="cancel()" type="button" class="btn btn-warning mx-1">cancel</button>
    </div>

    <button (click)="openNewDialog()" type="button" class="btn btn-info mx-1">open New Dialog</button>
</div>

For create draggable dialog:

you can use NgxDragableResizable library 🚀npm and change dialog header to:

 <div ngx-dialog-header [showCloseButton]="true" NgxDragableResizable [dragRootElement]="'.ngx-dialog'">
       header
 </div> 

Dialog config

Name	Type	Default	Description
[data]	any	{}	Pass data to modal component
[allowCloseOnOutsideClick]	boolean	false	The user can close the modal by clicking outside the modal
[containerClass]	string	null	Css class name
[header]	string	null	Header config
[footer]	string	null	Footer config
[width]	string	""	Width of dialog
[minWidth]	string	""	Minimum width of dialog
[maxWidth]	string	""	Maximum width of dialog
[height]	string	""	Height of dialog
[minHeight]	string	""	Minimum height of dialog
[maxHeight]	string	""	Maximum height of dialog

Author

💻Mohammadreza samani | FrontEnd Developer

❤️Buy me a coffee 😉