Alerts
To use Alerts, first import SharedModule in your module.
import {SharedModule} from '@gaxon/modules';
@NgModule({
...
imports: [SharedModule, ...],
...
})
export class YourAppModule {
}Basic Alert
<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
<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
<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
<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 {}Last updated
Was this helpful?