Alert

Alert component for feedback.

When To Use#

  • When you need to show alert messages to users.
  • When you need a persistent static container which is closable by user actions.

Import this Component Individually#

You can get more detail here.

import { NzAlertModule } from 'ng-zorro-antd/alert';

Examples

Success Text

The simplest usage for short messages.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-alert-basic',
  template: `
    <nz-alert nzType="success" nzMessage="Success Text"></nz-alert>
  `
})
export class NzDemoAlertBasicComponent {}
Warning Text Warning Text Warning Text Warning Text Warning Text Warning Text Warning Text
Error TextError Description Error Description Error Description Error Description Error Description Error Description

To show close button.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-alert-closable',
  template: `
    <nz-alert
      nzType="warning"
      nzCloseable
      nzMessage="Warning Text Warning Text Warning Text Warning Text Warning Text Warning Text Warning Text"
      (nzOnClose)="afterClose()"
    >
    </nz-alert>
    <nz-alert
      nzType="error"
      nzCloseable
      nzMessage="Error Text"
      nzDescription="Error Description Error Description Error Description Error Description Error Description Error Description"
      (nzOnClose)="afterClose()"
    >
    </nz-alert>
  `,
  styles: [
    `
      nz-alert {
        margin-bottom: 16px;
      }
    `
  ]
})
export class NzDemoAlertClosableComponent {
  afterClose(): void {
    console.log('close');
  }
}
Success Tips
Informational Notes
Warning
Error
Success TipsDetailed description and advices about successful copywriting.
Informational NotesAdditional description and informations about copywriting.
WarningThis is a warning notice about copywriting.
ErrorThis is an error message about copywriting.

Decent icon make information more clear and more friendly.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-alert-icon',
  template: `
    <nz-alert nzType="success" nzMessage="Success Tips" nzShowIcon></nz-alert>
    <nz-alert nzType="info" nzMessage="Informational Notes" nzShowIcon></nz-alert>
    <nz-alert nzType="warning" nzMessage="Warning" nzShowIcon></nz-alert>
    <nz-alert nzType="error" nzMessage="Error" nzShowIcon></nz-alert>
    <nz-alert
      nzType="success"
      nzMessage="Success Tips"
      nzDescription="Detailed description and advices about successful copywriting."
      nzShowIcon
    >
    </nz-alert>
    <nz-alert
      nzType="info"
      nzMessage="Informational Notes"
      nzDescription="Additional description and informations about copywriting."
      nzShowIcon
    >
    </nz-alert>
    <nz-alert
      nzType="warning"
      nzMessage="Warning"
      nzDescription="This is a warning notice about copywriting."
      nzShowIcon
    >
    </nz-alert>
    <nz-alert nzType="error" nzMessage="Error" nzDescription="This is an error message about copywriting." nzShowIcon>
    </nz-alert>
  `,
  styles: [
    `
      nz-alert {
        margin-bottom: 16px;
      }
    `
  ]
})
export class NzDemoAlertIconComponent {}

Display Alert as a banner at top of page.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-alert-banner',
  template: `
    <nz-alert nzBanner nzMessage="Warning text"></nz-alert>
    <nz-alert
      nzBanner
      nzMessage="Very long warning text warning text text text text text text text"
      nzCloseable
    ></nz-alert>
    <nz-alert nzBanner nzMessage="Warning text without icon" [nzShowIcon]="false"></nz-alert>
    <nz-alert nzBanner nzType="error" nzMessage="Error text"></nz-alert>
  `,
  styles: [
    `
      nz-alert {
        margin-bottom: 12px;
      }
    `
  ]
})
export class NzDemoAlertBannerComponent {}
Success Text
Info Text
Warning Text
Error Text

There are 4 types of Alert: success, info, warning, error.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-alert-style',
  template: `
    <nz-alert nzType="success" nzMessage="Success Text"></nz-alert>
    <nz-alert nzType="info" nzMessage="Info Text"></nz-alert>
    <nz-alert nzType="warning" nzMessage="Warning Text"></nz-alert>
    <nz-alert nzType="error" nzMessage="Error Text"></nz-alert>
  `,
  styles: [
    `
      nz-alert {
        margin-bottom: 16px;
      }
    `
  ]
})
export class NzDemoAlertStyleComponent {}
Success TextSuccess Description Success Description Success Description
Info TextInfo Description Info Description Info Description Info Description
Warning TextWarning Description Warning Description Warning Description Warning Description
Error TextError Description Error Description Error Description Error Description

Additional description for alert message.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-alert-description',
  template: `
    <nz-alert
      nzType="success"
      nzMessage="Success Text"
      nzDescription="Success Description Success Description Success Description"
    >
    </nz-alert>
    <nz-alert
      nzType="info"
      nzMessage="Info Text"
      nzDescription="Info Description Info Description Info Description Info Description"
    >
    </nz-alert>
    <nz-alert
      nzType="warning"
      nzMessage="Warning Text"
      nzDescription="Warning Description Warning Description Warning Description Warning Description"
    >
    </nz-alert>
    <nz-alert
      nzType="error"
      nzMessage="Error Text"
      nzDescription="Error Description Error Description Error Description Error Description"
    >
    </nz-alert>
  `,
  styles: [
    `
      nz-alert {
        margin-bottom: 16px;
      }
    `
  ]
})
export class NzDemoAlertDescriptionComponent {}
Info TextClose Now

Replace the default icon with customized content.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-alert-close-text',
  template: `
    <nz-alert nzType="info" nzMessage="Info Text" nzCloseText="Close Now"></nz-alert>
  `
})
export class NzDemoAlertCloseTextComponent {}

API#

nz-alert#

PropertyDescriptionTypeDefault
[nzBanner]Whether to show as bannerbooleanfalse
[nzCloseable]Whether Alert can be closedboolean-
[nzCloseText]Close text to showstring | TemplateRef<void>-
[nzDescription]Additional content of Alertstring | TemplateRef<void>-
[nzMessage]Content of Alertstring | TemplateRef<void>-
[nzShowIcon]Whether to show icon, in nzBanner mode default is truebooleanfalse
[nzIconType]Icon type, effective when nzShowIcon is truestring | string[] | Set<string> | { [klass: string]: any; }-
[nzType]Type of Alert styles, in nzBanner mode default is 'warning''success' | 'info' | 'warning' | 'error''info'
(nzOnClose)Callback when Alert is closedEventEmitter<void>-