Notification

Display a notification message globally.

When To Use#

To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:

  • A notification with complex content.
  • A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.
  • A notification that is pushed by the application.

Import this Component Individually#

You can get more detail here.

import { NzNotificationModule } from 'ng-zorro-antd/notification';

How To Use#

Similar to NzMessage, if you want to modify the global default configuration, you can modify the value of provider NZ_NOTIFICATION_CONFIG. (Example: Add { provide: NZ_NOTIFICATION_CONFIG, useValue: { nzDuration: 3000 }} to providers of your module, NZ_NOTIFICATION_CONFIG can be imported from ng-zorro-antd)

The default global configuration is:

{
  nzTop         : '24px',
  nzBottom      : '24px',
  nzPlacement   : 'topRight',
  nzDuration    : 4500,
  nzMaxStack    : 7,
  nzPauseOnHover: true,
  nzAnimate     : true
 }

Examples

The simplest usage that close the notification box after 4.5s.

expand codeexpand code
import { Component } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd/notification';

@Component({
  selector: 'nz-demo-notification-basic',
  template: `
    <button nz-button [nzType]="'primary'" (click)="createBasicNotification()">Open the notification box</button>
  `
})
export class NzDemoNotificationBasicComponent {
  constructor(private notification: NzNotificationService) {}

  createBasicNotification(): void {
    this.notification.blank(
      'Notification Title',
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
    );
  }
}

A notification box with a icon at the left side.

expand codeexpand code
import { Component } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd/notification';

@Component({
  selector: 'nz-demo-notification-with-icon',
  template: `
    <button nz-button (click)="createNotification('success')">Success</button>
    <button nz-button (click)="createNotification('info')">Info</button>
    <button nz-button (click)="createNotification('warning')">Warning</button>
    <button nz-button (click)="createNotification('error')">Error</button>
  `,
  styles: [
    `
      button {
        margin-right: 1em;
      }
    `
  ]
})
export class NzDemoNotificationWithIconComponent {
  createNotification(type: string): void {
    this.notification.create(
      type,
      'Notification Title',
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
    );
  }

  constructor(private notification: NzNotificationService) {}
}

The icon can be customized to any TemplateRef<void>.

expand codeexpand code
import { Component, TemplateRef } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd/notification';

@Component({
  selector: 'nz-demo-notification-custom-icon',
  template: `
    <ng-template #template>
      <div class="ant-notification-notice-content">
        <div class="ant-notification-notice-with-icon">
          <span class="ant-notification-notice-icon"
            ><i nz-icon nzType="smile" style="color: rgb(16, 142, 233);"></i
          ></span>
          <div class="ant-notification-notice-message">Notification Title</div>
          <div class="ant-notification-notice-description">
            This is the content of the notification. This is the content of the notification. This is the content of the
            notification.
          </div>
        </div>
      </div>
    </ng-template>
    <button nz-button [nzType]="'primary'" (click)="createBasicNotification(template)">
      Open the notification box
    </button>
  `
})
export class NzDemoNotificationCustomIconComponent {
  constructor(private notification: NzNotificationService) {}

  createBasicNotification(template: TemplateRef<{}>): void {
    this.notification.template(template);
  }
}

The nzStyle and nzClass are available to customize Notification.

expand codeexpand code
import { Component } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd/notification';

@Component({
  selector: 'nz-demo-notification-custom-style',
  template: `
    <button nz-button [nzType]="'primary'" (click)="createBasicNotification()">Open the notification box</button>
  `
})
export class NzDemoNotificationCustomStyleComponent {
  constructor(private notification: NzNotificationService) {}

  createBasicNotification(): void {
    this.notification.blank(
      'Notification Title',
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
      {
        nzStyle: {
          width: '600px',
          marginLeft: '-265px'
        },
        nzClass: 'test-class'
      }
    );
  }
}

Use template to implement more complex interactions.

expand codeexpand code
import { Component, TemplateRef, ViewChild } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd/notification';

@Component({
  selector: 'nz-demo-notification-template',
  template: `
    <button nz-button [nzType]="'primary'" (click)="ninja()">Open the notification box</button>
    <ng-template let-fruit="data">
      It's a <nz-tag [nzColor]="fruit.color">{{ fruit.name }}</nz-tag>
      <button nz-button nzType="small">Cut It!</button>
    </ng-template>
  `,
  styles: [
    `
      button {
        margin-top: 8px;
      }
    `
  ]
})
export class NzDemoNotificationTemplateComponent {
  @ViewChild(TemplateRef, { static: false }) template: TemplateRef<{}>;

  ninja(): void {
    const fruits = [
      { name: 'Apple', color: 'red' },
      { name: 'Orange', color: 'orange' },
      { name: 'Watermelon', color: 'green' }
    ];

    fruits.forEach(fruit => {
      this.notificationService.template(this.template, { nzData: fruit });
    });
  }

  constructor(private notificationService: NzNotificationService) {}
}

nzDuration can be used to specify how long the notification stays open. After the duration time elapses, the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to 0, the notification box will never close automatically.

expand codeexpand code
import { Component } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd/notification';

@Component({
  selector: 'nz-demo-notification-duration',
  template: `
    <button nz-button [nzType]="'primary'" (click)="createBasicNotification()">Open the notification box</button>
  `
})
export class NzDemoNotificationDurationComponent {
  createBasicNotification(): void {
    this.notification.blank(
      'Notification Title',
      'I will never close automatically. I will be close automatically. I will never close automatically.',
      { nzDuration: 0 }
    );
  }

  constructor(private notification: NzNotificationService) {}
}

To customize the style or font of the close button.

expand codeexpand code
import { Component, TemplateRef } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd/notification';

@Component({
  selector: 'nz-demo-notification-with-btn',
  template: `
    <ng-template #template let-notification>
      <div class="ant-notification-notice-content">
        <div>
          <div class="ant-notification-notice-message">Notification Title</div>
          <div class="ant-notification-notice-description">
            A function will be be called after the notification is closed (automatically after the "duration" time of
            manually).
          </div>
          <span class="ant-notification-notice-btn">
            <button nz-button nzType="primary" nzSize="small" (click)="notification.close()">
              <span>Confirm</span>
            </button>
          </span>
        </div>
      </div>
    </ng-template>
    <button nz-button [nzType]="'primary'" (click)="createBasicNotification(template)">
      Open the notification box
    </button>
  `
})
export class NzDemoNotificationWithBtnComponent {
  constructor(private notification: NzNotificationService) {}

  createBasicNotification(template: TemplateRef<{}>): void {
    this.notification.template(template);
  }
}
topRight

A notification box can pop up from topRight or bottomRight or bottomLeft or topLeft.

expand codeexpand code
import { Component } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd/notification';

@Component({
  selector: 'nz-demo-notification-placement',
  template: `
    <nz-select
      [(ngModel)]="placement"
      style="width: 120px; margin-right: 10px;"
      (ngModelChange)="clearBeforeNotifications()"
    >
      <nz-option nzValue="topLeft" nzLabel="topLeft"></nz-option>
      <nz-option nzValue="topRight" nzLabel="topRight"></nz-option>
      <nz-option nzValue="bottomLeft" nzLabel="bottomLeft"></nz-option>
      <nz-option nzValue="bottomRight" nzLabel="bottomRight"></nz-option>
    </nz-select>
    <button nz-button [nzType]="'primary'" (click)="createBasicNotification()">Open the notification box</button>
  `
})
export class NzDemoNotificationPlacementComponent {
  placement = 'topRight';

  clearBeforeNotifications(): void {
    this.notification.remove();
  }

  createBasicNotification(): void {
    this.notification.config({
      nzPlacement: this.placement
    });
    this.notification.blank(
      'Notification Title',
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
    );
  }

  constructor(private notification: NzNotificationService) {}
}

Update content with unique nzKey.

expand codeexpand code
import { Component } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd/notification';

@Component({
  selector: 'nz-demo-notification-update',
  template: `
    <button nz-button [nzType]="'primary'" (click)="createAutoUpdatingNotifications()">
      Open the notification box
    </button>
  `
})
export class NzDemoNotificationUpdateComponent {
  constructor(private notification: NzNotificationService) {}

  createAutoUpdatingNotifications(): void {
    this.notification.blank('Notification Title', 'Description.', {
      nzKey: 'key'
    });

    setTimeout(() => {
      this.notification.blank('New Title', 'New description', {
        nzKey: 'key'
      });
    }, 1000);
  }
}

API#

NzNotificationService#

The component provides a number of service methods using the following methods and parameters:

  • NzNotificationService.blank(title, content, [options]) // Notification without icon
  • NzNotificationService.success(title, content, [options])
  • NzNotificationService.error(title, content, [options])
  • NzNotificationService.info(title, content, [options])
  • NzNotificationService.warning(title, content, [options])
ArgumentDescriptionTypeDefault
titleTitlestring-
contentNotification contentstring-
optionsSupport setting the parameters for the current notification box, see the table belowobject-

The parameters that are set by the options support are as follows:

ArgumentDescriptionType
nzKeyThe unique identifier of the Notificationstring
nzDurationDuration (milliseconds), does not disappear when set to 0number
nzPauseOnHoverDo not remove automatically when mouse is over while setting to trueboolean
nzAnimateWhether to turn on animationboolean
nzStyleCustom inline styleobject
nzClassCustom CSS classobject
nzDataAnything that would be used as template contextany

Methods for destruction are also provided:

  • NzNotificationService.remove(id) // Remove the notification with the specified id. When the id is empty, remove all notifications (the notification id is returned by the above method)

Global configuration (NZ_MESSAGE_CONFIG)#

参数说明类型默认值
nzDurationDuration (milliseconds), does not disappear when set to 0number4500
nzMaxStackThe maximum number of notifications that can be displayed at the same timenumber8
nzPauseOnHoverDo not remove automatically when mouse is over while setting to truebooleantrue
nzAnimateWhether to turn on animationbooleantrue
nzTopThe top of the notification when it pops up from the top.string24px
nzBottomThe bottom of the notification when it pops up from the bottom.string24px
nzPlacementPopup position, optional topLefttopRightbottomLeftbottomRightstringtopRight

NzNotificationDataFilled#

It's the object that returned when you call NzNotificationService.success and others.

export interface NzNotificationDataFilled {
  onClose: Subject<boolean>; // It would emit an event when the notification is closed, and emit a `true` if it's closed by user
}