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

<ngb-alert type="warning" [dismissible]="false">
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
</ngb-alert>

TypeScript

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

<ng-container *ngFor="let alert of alerts">
  <ngb-alert [type]="alert.type" (close)="closeAlert(alert)">{{ alert.message }}</ngb-alert>
</ng-container>

TypeScript

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

<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>

TypeScript

import {Component, Input} from '@angular/core';

@Component({
  selector: 'ngbd-link-color',
  templateUrl: './link-color.component.html'
})
export class LinkColorComponent  {}

Custom Alert

Preview

HTML

<ngb-alert type="custom" [dismissible]="false"><strong>Whoa!</strong> This is a custom alert.</ngb-alert>

TypeScript

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 {}