lib-dialog-component v1.0.2

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

Icons from Font Awesome 5

Class names based on Bootstrap 4

Inputs

Outputs

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`
    })

  }
}