# Alerts

To use Alerts, first import `SharedModule` in your module.

```typescript
import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}
```

### Basic Alert

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuCBmbIV0P-1JRgHITo%2F-LuBwcgLqldIfW-PKVLF%2Fbasic-alerts.png?alt=media\&token=91faf09d-d854-442f-9d36-f714de9de691)
{% endtab %}

{% tab title="HTML" %}

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

```

{% endtab %}

{% tab title="TypeScript" %}

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

@Component({
  selector: 'ngbd-alert-basic',
  templateUrl: './alert-basic.html'
})
export class NgbdAlertBasic {}

```

{% endtab %}
{% endtabs %}

&#x20;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](https://ng-bootstrap.github.io/#/components/alert/api)

### Closable Alert

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuCVxzPEHIsgwmDAEIj%2F-LuBwcgMmfTrIT69z4WI%2Fcloseable-alert.png?alt=media\&token=53bb43ee-c248-49d2-8d9b-0a8473f78d26)
{% endtab %}

{% tab title="HTML" %}

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

{% endtab %}

{% tab title="TypeScript" %}

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

```

{% endtab %}
{% endtabs %}

For more information about options, check the [Ng-Bootstrap](https://ng-bootstrap.github.io/#/components/alert/api)

### Alert With Link

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuCuGtZyhgOUqoz4UWp%2F-LuD-QgtdeU6WMaOb7EL%2Falert-with-link.png?alt=media\&token=ec78660e-8554-4cba-aeee-2c06653ccda0)
{% endtab %}

{% tab title="HTML" %}

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

{% endtab %}

{% tab title="TypeScript" %}

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

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

{% endtab %}
{% endtabs %}

### Custom Alert

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuCVxzPEHIsgwmDAEIj%2F-LuBvCCHVMc8npoP0P_W%2Fcustom-alerts.png?alt=media\&token=bd2ee135-1e47-4c6b-8493-82f73dce17c3)
{% endtab %}

{% tab title="HTML" %}

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

{% endtab %}

{% tab title="TypeScript" %}

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

{% endtab %}
{% endtabs %}