Dialog

This library allows to create popup dialogs.

use the fallowing command to install the package

npm install @angular-dev-kit/dialog

The dialogs can be shown fallowing things

1. Component
2. Template

The DialogService used to open the popup

Example with Component

Create the component like Below to show it in the popup

import { Component, Inject, Optional, Injector, OnInit } from '@angular/core';
import { DialogRef } from 'dialog';
import { DIALOG_REF } from 'dailog';

@Component({
  selector: 'app-ex2',
  standalone: true,
  imports: [],
  template: '
  <p> Example Popup</p>
  <button (click)="closeDialog()" > close</button>
  
  ',
  styleUrl: './ex2.component.scss'
})
export class Ex2Component implements OnInit {

  constructor( @Optional() @Inject(DIALOG_REF) public ref: DialogRef<Ex2Component>, private i: Injector) {

  }

  colseDialog() {
    this.ref.close();
  }

}

   

Create another component like below to open the popup

import { Component} from '@angular/core';
import { Ex2Component } from './ex2/ex2.component';
import {DEFAULT_DIALOG_CONFIG, DialogConfig, DialogService} from 'dailog'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  providers: [{ provide: DEFAULT_DIALOG_CONFIG, useValue: { style: { width: "500px" }, panelClass:"panel"}}],
  template: '
  
  <button (click)="createPopup()"> open popup</button>
  ',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'sample';

  constructor(private dialog:DialogService) {
    
  }

  createPopup() {
    let ref =this.dialog.open(Ex2Component);
  }

}

Example with Template

import { Component,TemplateRef, ViewChild,} from '@angular/core';
import {DEFAULT_DIALOG_CONFIG, DialogConfig, DialogService} from 'dailog'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  providers: [{ provide: DEFAULT_DIALOG_CONFIG, useValue: { style: { width: "500px" }, panelClass:"panel"}}],
  template: '
  <ng-template #popup>
  <div>popup</div>
  </ng-template>
  <button (click)="createPopup()"> open popup</button>
  ',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'sample';

   @ViewChild('popup', { read: TemplateRef, static: true })
  template!: TemplateRef<any>;

  constructor(private dialog:DialogService) {
    
  }

  createPopup() {
    let ref =this.dialog.open(template);
  }

}

DialogConfig

class DialogConfig {
    style?: StyleSheet 
    backdropClass?: string;
    panelClass?: string;
    disableClose?: boolean;
    inputs?: Map<string, any>;
    templateContext: any;
    customProviders?: StaticProvider[];
}

style

This property is used to set the styles for the container panel of the popup

backdropClass

This property is used to set the custom clases for the backdrop

panelClass

This property is used to set the custom clasess for the container panel

disableClsoe

This property is used to control the close popup using the backdrop click. if the property is true the popup cannot be closed using the backdrop click

inputs

This proprty is used to pass the component inputs for the component that needs to be rendered in the popup

templateContext

This property is used to pass the data to template in the popup

customPropviders

This property is used to pass the custom propvisers to the componenent that needs to be rendered in the poppup

DialogRef

    instance!: T;
    disableClose!: boolean;
    onBackDropClick!: EventEmitter<void>;
    beforeClose!: EventEmitter<void>;
    afterClose!: EventEmitter<void>;
    close():void;

instance

We can acess the component instance of that is rendered in the popup

disableClose

This property acts same as the disableClose proprty in dialog config

onBackDropClick

This property is used to handle the backdrop click event

beforeClose

This event will be trgired before closing the popup

afterClose

This event will be triggered after the popup has been closed

close

This function is used to close the popup