Default

Alerts are available for any length of text, as well as an optional dismiss button. Add <ngb-alert></ngb-alert> component along with [type] = "'ColorName'" directive to change the color of alert. Default color of alert is "warning".

Note: By default dismissible button in alert is on. To turn of the dismissable button add [dismissible]="false" directive to ngb-alert.

Good Morning! Start your day with some alerts.

Title

Add a title to the alert use .alert-heading inside <ngb-alert></ngb-alert> component.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, laborum!.

Colors

Add <ngb-alert></ngb-alert> component along with [type]="'ColorName'" directive to change the color of alert with all theme colors.

Primary

Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.

Secondary

Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.

Success

Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.

Danger

Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.

Warning

Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.

Info

Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.

Dark

Tootsie roll lollipop lollipop icing. Wafer cookie danish macaroon. Liquorice fruitcake apple pie I love cupcake cupcake.

Closable Alerts

To dismiss the alert on click of dismissable button in alert, use (close)='alertClose = !alertClose' with *ngIf="!alertClose" and assign public alertClose = false; variable inside typescript file.

Chupa chups topping bonbon. Jelly-o toffee I love. Sweet I love wafer I love wafer.

Icon

Alert With Icon

Chupa chups topping bonbon. Jelly-o toffee I love. Sweet I love wafer I love wafer.

Example

An example would be to have an input and when a condition is met, show the alert.

The value is invalid you can only enter numbers