Pages UI
Search…
Notifications
Pages Notification service that can be invoked from any page or component

Importing

First import it to your app module or any submodule as you wish
1
import { MessageModule } from '../@pages/components/message/message.module';
2
import { MessageService } from '../@pages/components/message/message.service';
3
@NgModule({
4
imports: [MessageModule,...],
5
providers: [MessageService,...]
6
})
7
export class AppModule(){}
Copied!

How to use

Typescript
1
import { Component, OnInit } from '@angular/core';
2
import { MessageService } from '../../@pages/components/message/message.service';
3
4
@Component({
5
selector: 'app-notificationspage',
6
templateUrl: './notificationspage.component.html',
7
styleUrls: ['./notificationspage.component.scss'],
8
})
9
export class mySamplePage implements OnInit {
10
11
constructor(private _notification: MessageService) {
12
}
13
14
ngAfterViewInit() {
15
this._notification.create(
16
"primary",
17
"Hello World",
18
{
19
Position:"top",
20
Style:"bar",
21
Duration:0
22
}
23
);
24
}
25
26
}
27
Copied!

API

Global configuration (Config)
parameter
Types of
Defaults
Instructions
Duration
Number
0
Duration, does not disappear when set to 0
Position
String
top
also supports bottom | bottom-left | bottom-right | top-left | top-right
Style
String
bar
bar | circle | simple
MaxStack
Number
8
The maximum number of prompts that can be displayed
PauseOnHover
Boolean
true
Pause countdown when mouse is over
MessageService service
method
parameter
Instructions
create
(type: string, content: string, options?: Object)
Provide type attribute, can be passed in options such as 'success'
html
(html: string, options?: Object)
HTML content can be used to render content
remove
(id?: string)
Remove specific id message, remove all messages when id is empty
Copy link