LibDialogComponent

Dialog component for Angular projects to show modal dialogs

Install

npm install djw/lib-dialog-component

Usage

In your app.module.ts (or any module.ts file):

import { LibDialogComponent } from 'lib-dialog-component/dist/lib-dialog-component/public-api';

then:

@NgModule({
  declarations: [
    AppComponent,
    LibDialogComponent,
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Dialog types

Dialog type	Icon	Button's class
message	faInfoCircle	btn-success
error	faExclamationTriangle	btn-primary
delete	faExclamationTriangle	btn-danger

Icons from Font Awesome 5

Class names based on Bootstrap 4

Inputs

Option	Type	Description
showDialog	boolean	Control the dialog open/close status.
title	string	Title of the dialog.
content	string	Contnet of the dialog.
type	enum	See types in Dialog types section.
disableCancel	boolean	You can disable cancel button.

Outputs

Method	Emit type	Description
dialogChange	string	The return value can be ok or cancel depends on user's behavior. If clicks on "OK" or "Delete" button, the result will be ok. Otherwise it will be cancel. If close the dialog, it means cancel too.

Examples

Info dialog

Show a simple message dialog to notify the user about message has been sent.

<lib-dialog-component
  type="message"
  [showDialog]="isOpen"
  [disableCancel]="true"
  title="Message sent"
  content="You message has been sent."
  (dialogChange)="close()"
  ></lib-dialog-component>

Error dialog

A simple error dialog to notify the user about unauthorized event happend.

In my.component.html:

<lib-dialog-component
  type="error"
  [showDialog]="isOpen"
  [disableCancel]="true"
  title="Unauthorized"
  content="You don't have permission to this page or function."
  (dialogChange)="close()"
  ></lib-dialog-component>

In my.component.ts:

import { Component, OnInit } from '@angular/core';
import { User } from 'src/models/user.model';

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss']
})
export class MyComponent implements OnInit {
  isOpen = false;

  constructor() {}

  ngOnInit() {
  }

  isAuthorized(user: User) {
    if (!user.hasPermission('my-component.write')) {
      this.isOpen = true;
    }
  }

  close() {
    this.isOpen = false;
  }
}

Delete dialog

In this example I show you a way how to handle returning value from dialog.

In my.component.html:

<lib-dialog-component
  type="delete"
  [showDialog]="isOpen"
  title="Are you sure?"
  content="You will be delete this information permanently. After deletion it will be lost and will not be recoverable!"
  (dialogChange)="closeOrDelete()"
  ></lib-dialog-component>

In my.component.ts:

import { Component, OnInit } from '@angular/core';
import { User } from 'src/models/user.model';
import { UserService } from 'src/services/user.service';

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss']
})
export class MyComponent implements OnInit {
  isOpen = false;
  users: User[] = [];
  selectedUser: User;

  constructor(
    userService: UserService,
  ) {
    // we load users data collection from server and push it into `users`
    userService.getAll().subscribe((users: User[]) => {
      this.users.push(...users);
    });
  }

  ngOnInit() {
  }

  closeOrDelete(destroy: string) {
    this.isOpen = false;

    if (destroy === 'cancel') {
      return;
    }

    userService.delete(selectedUser.id).subscribe((result: any) => {
      // remove the user from `users`
    })

  }
}