Angular6+Material+Modal Service

Angkarn Janjuang
Sep 1, 2018 · 5 min read
  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 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

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

  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

  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

Result

Thank you.

odds.team

Odds Team

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade