Angular6+Material+Modal Service

1. New Project angular version 6

ng new ng6-material-modal --style=scss

2. Install Material design to your angular project

npm install --save @angular/material @angular/cdk @angular/animations

3. import module in file “app.module.ts”

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
  ...
  imports: [
    ...
    BrowserAnimationsModule
    ...
  ]
})
export class AppModule { }

4. import material stylesheet in file “style.scss”

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

5. import material icon stylesheet in file “index.html”

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Ready to use Material Design in project angular6

Next Step

Create button for open button example

• Show Info Modal
• Show Warning Modal
• Show Error Modal
• Show Confirm Modal

1. open file app.component.html and replace code with

<div>
  <div class="button-row">
    <button mat-raised-button>Show Info Modal</button>
    <button mat-raised-button>Show Warning Modal</button>
    <button mat-raised-button>Show Error Modal</button>
    <button mat-raised-button>Show Confirm Modal</button>
  </div>
</div>

2. open file app.component.scss and replace code with

.button-row button {
  margin-right: 8px;
}

3. import material module in file “app.module.ts”

import { MatButtonModule } from '@angular/material';
@NgModule({
  ...
  imports: [
    ...
    MatButtonModule
  ]
)}
export class AppModule { }

4. start project with command “ng serve”

Next Step

Create modal in component module

1. Create Module Component without spec

ng generate module components/component --spec=false

Or

ng g module component --spec=false

2. Create Component alert modal

ng g c component/modal/alert

3. Create Modal Service

ng g s services/modal

4. Inject “MatDialog” in constructor “modal.service.ts” and provide function open modal 4 pattern

import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material';
@Injectable({
  providedIn: 'root'
})
export class ModalService {
  constructor(
    public dialog: MatDialog
  ) { }
  openInfoModal() { }
  openWarningModal() { }
  openErrorModal() { }
  openConfirmModal() { }
}

5. apply code open dialog in open InfoModal file “modal.service.ts”

openInfoModal() {
  const dialogRef = this.dialog.open(AlertComponent, {
    width: '300px',
    data: ''
  });
}

6. Call Modal Service

• provide function openInfoModal in file “app.component.ts”
• inject modalService in constructor
• call function openInfoModal in modalService

...
export class AppComponent {
  ...
  constructor(private modalService: ModalService) { }
  openInfoModal() {
    this.modalService.openInfoModal();
  }
}

7. apply function to button show modal file “app.component.html”

<button mat-raised-button (click)="openInfoModal()">Show Info Modal</button>

8. import “MatDialogModule” into “component.module.ts” and inject “AlertComponent” in entryComponents

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AlertComponent } from './alert/alert.component';
import { MatDialogModule } from '@angular/material';
@NgModule({
  imports: [
    CommonModule,
     MatDialogModule
  ],
  declarations: [AlertComponent],
  entryComponents: [AlertComponent]
})
export class ComponentModule { }

9. inject ComponentModule into app.module.ts

import { MatButtonModule } from '@angular/material';
@NgModule({
  ...
  imports: [
    ...
    ComponentModule
  ]
)}
export class AppModule { }

10. play

Code is work

Next Step

Custom style html

1. replace code in file alert.component.html

<h2 mat-dialog-title>INFO</h2>
<mat-dialog-content>
  <div>
    <mat-icon>info</mat-icon>Hello
  </div>
</mat-dialog-content>
<mat-divider></mat-divider>
<mat-dialog-actions align="center">
  <button mat-raised-button color="primary" mat-dialog-close>
    Close
  </button>
</mat-dialog-actions>

this code structure dialog of material composed of

• mat-dialog-title
• mat-dialog-content
• mat-dialog-actions

2. replace code in file alert.component.scss

mat-icon {
  vertical-align: middle;
}
mat-divider {
  margin-top: 20px;
}

3. import material module “MatIconModule, MatDividerModule, MatButtonModule” in component.module.ts

4. play again

Trick

how to use mat-dialog-close

• default binding event “onClose” use

<button mat-raised-button color="primary" mat-dialog-close>
  Close
</button>

• when you want to pass value after close modal

<button mat-raised-button color="primary" mat-dialog-close="true">
  Close
</button>

• when you want to pass data from object after close modal in example use data object with defined in file .ts

<button mat-raised-button color="primary" [mat-dialog-close]="data.title">
  Close
</button>

Example: edit code in file modal.service.ts

openInfoModal() {
  const dialogRef = this.dialog.open(AlertComponent, {
    width: '300px',
    data: ''
  });
  
  dialogRef.afterClosed().subscribe(result => {
    console.log('After Closed >>> ', result);
  });
}

Next Step

Custom alert modal 3 pattern “Info, Warning, Error”

1. defined alertType

export enum AlertType { INFO, WARNING, ERROR }

2. export class ModalAlertData

export class ModalAlertData {
  title: string;
  content: string;
  alertType: AlertType;
  closeButtonLabel: string;
  constructor(data?) {
    if (data) {
      this.title = data.title;
      this.content = data.content;
      this.alertType = data.alertType;
      this.closeButtonLabel = data.closeButtonLabel;
    }
  }
}

3. provide function getAlertIcon in file “alert.component.ts” for display icon in modal

getAlertIcon() {
  switch (this.data.alertType) {
    case AlertType.INFO: return 'info';
    case AlertType.WARNING: return 'warning';
    case AlertType.ERROR: return 'error';
  }
}

4. modifies code in file alert.component.html

<h2 mat-dialog-title>{{ data.title }}</h2>
<mat-dialog-content>
  <div>
    <mat-icon>{{ getAlertIcon() }}</mat-icon>
      {{ data.content }}
  </div>
</mat-dialog-content>
<mat-divider></mat-divider>
<mat-dialog-actions align="center">
  <button mat-raised-button color="primary" [mat-dialog-close]="data.title">
    {{ data.closeButtonLabel }}
  </button>
</mat-dialog-actions>

5. modifies code in file modal.service.ts

openInfoModal(message: string) {
  const dialogRef = this.dialog.open(AlertComponent, {
    width: '300px',
    data: new ModalAlertData({
      title: 'INFO',
      content: message,
      closeButtonLabel: 'Close',
      alertType: AlertType.INFO
    })
  });
  
  dialogRef.afterClosed().subscribe(result => {
    console.log('After Close Modal', result);
  });
}

6. modifies code in file “app.component.ts” in function openInfoModal

openInfoModal() {
   this.modalService.openInfoModal('Hello');
}

7. play again when code is work you can apply to all alert modal

Result

Challenge

you can adapt all example to create Modal Confirm

Result

Thank you.

Full Source: https://gitlab.com/angkarn9/ng6-material-modal