To use Alerts, first import SharedModule
in your module.
import {SharedModule} from '@gaxon/modules';​@NgModule({...imports: [SharedModule, ...],...})export class YourAppModule {}
<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​
<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​
<ngb-alert type="dark" [dismissible]="true">A simple alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give ita 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 {}
<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 {}