Drift Angular
  • Overview
  • Package Content
  • Installation and Setup
    • Setup Environment
    • Setup Project
    • Setup Layout
    • Deployment
  • Structure
    • Folders and Files Structure
    • Layouts
    • Drift Icons
  • Stylesheets
    • Overview
    • Sass Variables
    • Layouts & Theme
    • Fonts
    • Colors
    • Back Ground Images
    • Margin & Paddings
    • Theme Customization
    • RTL Version
  • Settings
    • Template Setting
    • Customize Horizontal Menu
    • Customize Vertical Menu
    • Create a Page
    • Define Routes
    • Root Loader
    • RTL
    • Internationalization
  • Components
    • Alerts
    • Badges
    • Breadcrumbs
    • Buttons
    • Button Group
    • Cards
    • Card Group
    • Collapse
    • Dropdowns
    • Progress Bar
    • Tabs
Powered by GitBook
On this page
  • Basic Alert
  • Closable Alert
  • Alert With Link
  • Custom Alert

Was this helpful?

  1. Components

Alerts

PreviousInternationalizationNextBadges

Last updated 5 years ago

Was this helpful?

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'

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

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

For more information about options, check the

For more information about options, check the

Ng-Bootstrap
Ng-Bootstrap