Resizable and Draggable Modal Component For Angular

In this post I am going to share an awesome angular component for your angular based application that is full featured rich model popup with lot’s of extra feature like Resizable, Draggable, Multiple Dialogs Support etc.

Features

✅ TemplateRef/Component Support
✅ Dialog Guards Support
✅ Resizable
✅ Draggable
✅ Multiple Dialogs Support
✅ Built-in Confirm/Success/Error Dialogs
✅ Customizable

Installation

From your project folder, run:

ng add @ngneat/dialog

This command will import the DialogModule.forRoot() in your AppModule:

import { DialogModule } from '@ngneat/dialog';

@NgModule({
  declarations: [AppComponent],
  imports: [DialogModule.forRoot()],
  bootstrap: [AppComponent]
})
export class AppModule {}

Usage

Using a Component

First, create the component to be displayed in the modal:

import { DialogService, DialogRef } from '@ngneat/dialog';

@Component({
  template: `
    
    Close
  `
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HelloWorldComponent {
  constructor(public ref: DialogRef) {}
}

Inside the component, you’ll have access to a DialogRef provider. You can call its close() method to close the current modal. You can also pass data that’ll be available for any subscribers to afterClosed$.

Now we can use the DialogService to open open the modal and display the component:

import { DialogService } from '@ngneat/dialog';

@Component({
  template: `
    Open
  `
})
export class AppComponent implements OnInit {
  constructor(private dialog: DialogService) {}

  ngOnInit() {
    const dialogRef = this.dialog.open(HelloWorldComponent);
  }
}

DialogRef API

The DialogRef instance exposes the following API:

• afterClosed$ – An observable that emits after the modal closes:

const dialogRef = this.dialog.open(HelloWorldComponent);
dialogRef.afterClosed$.subscribe(result => {
  console.log(`After dialog has been closed ${result}`);
});

• backdropClick$ – An observable that emits when the user clicks on the modal backdrop:

const dialogRef = this.dialog.open(HelloWorldComponent);
dialogRef.backdropClick$.subscribe(() => {
  console.log('Backdrop has been clicked');
});

• beforeClose – A guard that should return a boolean, an observable, or a promise indicating whether the modal can be closed:

dialogRef.beforeClose(result => dialogCanBeClosed);
dialogRef.beforeClose(result => this.service.someMethod(result));

• ref.data – A reference to the data that is passed by the component opened in the modal:

import { DialogService, DialogRef } from '@ngneat/dialog';

@Component({
  template: `
    
    Close
  `
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HelloWorldComponent {
  constructor(public ref: DialogRef) {}
}

The library also provides the dialogClose directive helper, that you can use to close the modal:

import { DialogService, DialogRef } from '@ngneat/dialog';

@Component({
  template: `
    
    Close
    Close with result
  `
})
export class HelloWorldComponent {}

Using a TemplateRef

Sometimes it can be overkill to create a whole component. In these cases, you can pass a reference to an :

import { DialogService } from '@ngneat/dialog';

@Component({
  selector: 'app-root',
  template: `
    
      

      Close
    

    Open
  `
})
export class AppComponent {
  constructor(private dialog: DialogService) {}

  open(tpl: TemplateRef) {
    this.dialog.open(tpl);
  }
}

Note that in this case, you can access the ref object by using the $implicit context property.

Passing Data to the Modal Component

Sometimes we need to pass data from the opening component to our modal component. In these cases, we can use the data property, and use it to pass any data we need:

import { DialogService } from '@ngneat/dialog';

@Component({
  template: `
    Open
  `
})
export class AppComponent implements OnInit {
  private id = '...';

  constructor(private dialog: DialogService) {}

  ngOnInit() {
    const dialogRef = this.dialog.open(HelloWorldComponent, {
      data: {
        id: this.id
      }
    });
  }
}

Now we can access it inside our modal component or template, by using the ref.data property.

Modal Options

• id – The modal unique id (defaults to random id).
• closeButton – Whether to display an ‘X’ for closing the modal (default is true).
• enableClose – Whether a click on the backdrop should close the modal (default is true).
• backdrop – Whether to show the backdrop element (default is true).
• resizable – Whether the modal show be resizeable (default is false).
• draggable – Whether the modal show be draggable (default is false).
• size – Set the modal size. The available options are sm, md, lg and fullScreen (default is md).
• windowClass – Add a custom class to the modal container.
• width – Set a custom width.
• height – Set a custom height.
• minHeight – Set a custom min-height.
• container – A custom element to which we append the modal (default is body).
• vcr – A custom ViewContainerRef to use.
• data – A data object that will be passed to the modal template or component.

this.dialog.open(compOrTemplate, {
  id: string,
  closeButton: boolean,
  enableClose: boolean,
  backdrop: boolean,
  resizable: boolean,
  draggable: boolean,
  size: sm | md | lg | fullScreen,
  windowClass: string,
  width: string,
  height: string,
  minHeight: string
});

Built-in Modals

The library provides built-in modals for common cases where we need to show a confirmation message, a success message, or an error message:

this.dialog
  .confirm({
    title: 'Are you sure?',
    body: 'This action cannot be undone.'
  })
  .afterClosed$.subscribe(confirmed => console.log(confirmed));

this.dialog.success({
  title: 'Hurray!',
  body: ''
});

this.dialog.error({
  title: 'Oh no',
  body: tpl
});

The body type can be a string, HTML string, or a .

You can also change the default dialogs, and use your own:

import { DialogModule } from '@ngneat/dialog';

@NgModule({
  declarations: [AppComponent],
  imports: [
    DialogModule.forRoot({
      success: {
        component: AppSuccessDialog
      },
      confirm: {
        component: AppConfirmDialog
      },
      error: {
        component: AppErrorDialog
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Custom Sizes

You can define the modal sizes globally by using the sizes option:

import { DialogModule } from '@ngneat/dialog';

@NgModule({
  declarations: [AppComponent],
  imports: [
    DialogModule.forRoot({
      sizes: {
        sm: {
          width: '300px',
          minHeight: '250px'
        },
        md: {
          width: '60vw',
          height: '60vh'
        },
        lg: {
          width: '90vw',
          height: '90vh'
        },
        fullScreen: {
          width: '100vw',
          height: '100vh'
        }
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Styling

You can customize the styles with these classes:

ngneat-dialog {
  .ngneat-dialog-backdrop {
    // backdrop styles
    .ngneat-dialog-content {
      // dialog content, where your component/template is placed
      .ngneat-drag-marker {
        // draggable marker
      }
      .ngneat-close-dialog {
        // 'X' icon for closing the dialog
      }
      .ngneat-dialog-primary-btn,
      .ngneat-dialog-secondary-btn {
        // the default dialogs action buttons
      }
    }
  }
}

See live demo and download source code.
DEMO DOWNLOAD

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by ngneat. Visit their official repository for more information and follow for future updates.

Related