ng-dialog-animation

NgDialogAnimation

This library using angular material dialog with animation, title, and rtl support.

options

• Title.
• Auto set diraction rtl when find dit='rtl'.
• position.rowEnd/position.rowStart.
• Animation -

    animation?:
        | {
              to: 'aside' | 'top' | 'bottom' | 'left' | 'right';
              incomingOptions?: { keyframes?: Keyframe[]; keyframeAnimationOptions: KeyframeAnimationOptions };
              outgoingOptions?: { keyframes?: Keyframe[]; keyframeAnimationOptions: KeyframeAnimationOptions }
          }
        | {
              to?: 'aside' | 'top' | 'bottom' | 'left' | 'right';
              incomingOptions?: { keyframes: Keyframe[]; keyframeAnimationOptions: KeyframeAnimationOptions };
              outgoingOptions?: { keyframes: Keyframe[]; keyframeAnimationOptions: KeyframeAnimationOptions };
          };

stackblitz playground

Get started

install

npm i ng-dialog-animation

add to providers

@NgModule({
//....
    providers: [
        NgDialogAnimationService,
    ],
})
//......

inject to your component

import { NgDialogAnimationService } from 'ng-dialog-animation';

export class SomeComponent {
  constructor(public dialog: NgDialogAnimationService) {
  }
}

now you can use it like material dialog with the extra things

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: "250px",
      animation: { to: "aside" }
    }
}