ng2ds-user-alerts
v4.0.11-rc.4
Published
customizable user alerts for Angular
Downloads
18
Readme
ng2ds-user-alerts
user alert modals for Angular apps
quickstart
npm install ng2ds-user-alerts
add to module.ts
import { Ng2dsUserAlertsService, Ng2dsUserAlerts } from 'ng2ds-user-alerts';
...
@NgModule({
declarations: [
...
Ng2dsUserAlerts
],
imports: [...],
providers: [Ng2dsUserAlertsService],
...
add to your index.html if you want close button displayed on ui
<link href="https://file.myfontastic.com/JR3FD8zmWfGk4B4oAz3KEh/icons.css" rel="stylesheet">
add somewhere in root of app i.e. next to router-outlet [ all config options shown with their default values ]
<ng2ds-user-alerts
[overlayOpacity]="0.7"
[useOverlay]=false
[removeHeader]=true
[bodyPadding]="'32px 16px'"
[margin]="10"
[width]="80"
[font]="Arial"
[headerFontSize]="'20px'"
[contentFontSize]="'16px'"
[successColor]="'#5cb85c'"
[errorColor]="'#d9534f'"
[warningColor]="'#f0ad4e'"
[infoColor]="'#5bc0de'"
[contentBg]="'#fefefe'"
[headerFontColor]="'#FFF'"
[contentFontColor]="'#333'"
[lineHeight]="'16px'"
[closeTimeout]=3300
></ng2ds-user-alerts>
import into your component, inject into constructor
...
import { Ng2dsUserAlertsService } from 'ng2ds-user-alerts';
...
export class AppComponent {
constructor( private ng2dsUserAlerts:Ng2dsUserAlertsService ) {}
methods to show alert
public demoSuccessModal() {
this.ng2dsUserAlerts.openModal( 'success', 'Success Header', 'Some Content', 0 );
}
public demoErrorModal() {
this.ng2dsUserAlerts.openModal( 'error', 'Error Header', 'Some Content', 0 );
}
public demoWarningAutoClose() {
this.ng2dsUserAlerts.openModal( 'warning', 'Warning Header', 'Some Content', 2000 );
}
- last number is timeout delay (0 will use close button)
- if useOverlay is true, will use click anywhere as close