Alerts

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​
Alert With Link
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
Copy link
Contents