Drift Angular
Search…
Alerts
To use Alerts, first import SharedModule in your module.
1
import {SharedModule} from '@gaxon/modules';
2
3
@NgModule({
4
...
5
imports: [SharedModule, ...],
6
...
7
})
8
export class YourAppModule {
9
}
Copied!

Basic Alert

Preview
HTML
TypeScript
1
<ngb-alert type="warning" [dismissible]="false">
2
<strong>Warning!</strong> Better check yourself, you're not looking too good.
3
</ngb-alert>
4
Copied!
1
import {Component, Input} from '@angular/core';
2
3
@Component({
4
selector: 'ngbd-alert-basic',
5
templateUrl: './alert-basic.html'
6
})
7
export class NgbdAlertBasic {}
8
Copied!
Bootstrap provides styles for the following types: 'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'
For more information about options, check the Ng-Bootstrap

Closable Alert

Preview
HTML
TypeScript
1
<ng-container *ngFor="let alert of alerts">
2
<ngb-alert [type]="alert.type" (close)="closeAlert(alert)">{{ alert.message }}</ngb-alert>
3
</ng-container>
Copied!
1
import { Input, Component } from '@angular/core';
2
3
@Component({
4
selector: 'ngbd-alert-closeable',
5
templateUrl: './alert-closeable.html'
6
})
7
export class NgbdAlertCloseable {
8
9
@Input()
10
public alerts: Array<IAlert> = [];
11
12
constructor() {
13
this.alerts.push({
14
id: 5,
15
type: 'primary',
16
message: 'This is a primary alert',
17
}, {
18
id: 6,
19
type: 'secondary',
20
message: 'This is a secondary alert',
21
}, {
22
id: 1,
23
type: 'success',
24
message: 'This is a success alert',
25
}, {
26
id: 4,
27
type: 'danger',
28
message: 'This is a danger alert',
29
}, {
30
id: 3,
31
type: 'warning',
32
message: 'This is a warning alert',
33
}, {
34
id: 2,
35
type: 'info',
36
message: 'This is an info alert',
37
}, {
38
id: 7,
39
type: 'light',
40
message: 'This is a light alert',
41
}, {
42
id: 8,
43
type: 'dark',
44
message: 'This is a dark alert',
45
});
46
}
47
48
public closeAlert(alert: IAlert) {
49
const index: number = this.alerts.indexOf(alert);
50
this.alerts.splice(index, 1);
51
}
52
}
53
54
export interface IAlert {
55
id: number;
56
type: string;
57
message: string;
58
}
59
Copied!
For more information about options, check the Ng-Bootstrap
Preview
HTML
TypeScript
1
<ngb-alert type="dark" [dismissible]="true">
2
A simple alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it
3
a click if you like.
4
</ngb-alert>
Copied!
1
import {Component, Input} from '@angular/core';
2
3
@Component({
4
selector: 'ngbd-link-color',
5
templateUrl: './link-color.component.html'
6
})
7
export class LinkColorComponent {}
Copied!

Custom Alert

Preview
HTML
TypeScript
1
<ngb-alert type="custom" [dismissible]="false"><strong>Whoa!</strong> This is a custom alert.</ngb-alert>
Copied!
1
import { Component } from '@angular/core';
2
3
@Component({
4
selector: 'ngbd-alert-custom',
5
templateUrl: './alert-custom.html',
6
styles: [`
7
:host >>> .alert-custom {
8
color: #99004d;
9
background-color: #f169b4;
10
border-color: #800040;
11
}
12
`]
13
})
14
export class NgbdAlertCustom {}
Copied!
Last modified 2yr ago