Alerts

Search…
Alerts
To use Alerts, first import SharedModule in your module.
import {SharedModule} from '@gaxon/modules';
​
@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}
Basic Alert
Preview
HTML
TypeScript
<ngb-alert type="warning" [dismissible]="false">
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
</ngb-alert>
​
import {Component, Input} from '@angular/core';
​
@Component({
  selector: 'ngbd-alert-basic',
  templateUrl: './alert-basic.html'
})
export class NgbdAlertBasic {}
​
 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
<ng-container *ngFor="let alert of alerts">
  <ngb-alert [type]="alert.type" (close)="closeAlert(alert)">{{ alert.message }}</ngb-alert>
</ng-container>
import { Input, Component } from '@angular/core';
​
@Component({
  selector: 'ngbd-alert-closeable',
  templateUrl: './alert-closeable.html'
})
export class NgbdAlertCloseable {
​
  @Input()
  public alerts: Array<IAlert> = [];
​
  constructor() {
    this.alerts.push({
      id: 5,
      type: 'primary',
      message: 'This is a primary alert',
    }, {
      id: 6,
      type: 'secondary',
      message: 'This is a secondary alert',
    }, {
      id: 1,
      type: 'success',
      message: 'This is a success alert',
    }, {
      id: 4,
      type: 'danger',
      message: 'This is a danger alert',
    }, {
      id: 3,
      type: 'warning',
      message: 'This is a warning alert',
    }, {
      id: 2,
      type: 'info',
      message: 'This is an info alert',
    }, {
      id: 7,
      type: 'light',
      message: 'This is a light alert',
    }, {
      id: 8,
      type: 'dark',
      message: 'This is a dark alert',
    });
  }
​
  public closeAlert(alert: IAlert) {
    const index: number = this.alerts.indexOf(alert);
    this.alerts.splice(index, 1);
  }
}
​
export interface IAlert {
  id: number;
  type: string;
  message: string;
}
​
For more information about options, check the Ng-Bootstrap​
Alert With Link
Preview
HTML
TypeScript
<ngb-alert type="dark" [dismissible]="true">
    A simple alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it
    a click if you like.
</ngb-alert>
import {Component, Input} from '@angular/core';
​
@Component({
  selector: 'ngbd-link-color',
  templateUrl: './link-color.component.html'
})
export class LinkColorComponent  {}
Custom Alert
Preview
HTML
TypeScript
<ngb-alert type="custom" [dismissible]="false"><strong>Whoa!</strong> This is a custom alert.</ngb-alert>
import { Component } from '@angular/core';
​
@Component({
  selector: 'ngbd-alert-custom',
  templateUrl: './alert-custom.html',
  styles: [`
    :host >>> .alert-custom {
      color: #99004d;
      background-color: #f169b4;
      border-color: #800040;
    }
  `]
})
export class NgbdAlertCustom {}
Settings - Previous
Internationalization
Next - Components
Badges
Last modified 2yr ago
Copy link
Outline
Basic Alert
Closable Alert
Alert With Link
Custom Alert