Message

Display global messages as feedback in response to user operations.

When To Use#

  • To provide feedback such as success, warning, error etc.
  • A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weighted prompt.

Import this Component Individually#

You can get more detail here.

import { NzMessageModule } from 'ng-zorro-antd/message';

How To Use#

If you want to modify the global default configuration, you can modify the value of provider NZ_MESSAGE_CONFIG. (eg, add { provide: NZ_MESSAGE_CONFIG, useValue: { nzDuration: 3000 }} to providers of your module, NZ_MESSAGE_CONFIG can be imported from ng-zorro-antd)

The default global configuration is:

{
  nzDuration: 3000,
  nzMaxStack: 7,
  nzPauseOnHover: true,
  nzAnimate: true
}

Examples

Normal messages as feedbacks.

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

@Component({
  selector: 'nz-demo-message-info',
  template: `
    <button nz-button [nzType]="'primary'" (click)="createBasicMessage()">Display normal message</button>
  `
})
export class NzDemoMessageInfoComponent {
  constructor(private message: NzMessageService) {}

  createBasicMessage(): void {
    this.message.info('This is a normal message');
  }
}

Customize message display duration from default 3s to 10s.

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

@Component({
  selector: 'nz-demo-message-duration',
  template: `
    <button nz-button [nzType]="'default'" (click)="createBasicMessage()">Customized display duration</button>
  `
})
export class NzDemoMessageDurationComponent {
  createBasicMessage(): void {
    this.message.success('This is a prompt message for success, and it will disappear in 10 seconds', {
      nzDuration: 10000
    });
  }

  constructor(private message: NzMessageService) {}
}

You can subscribe to onClose event to make some operations. This case would open three messages in sequence.

expand codeexpand code
import { Component } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { concatMap } from 'rxjs/operators';

@Component({
  selector: 'nz-demo-message-close',
  template: `
    <button nz-button [nzType]="'default'" (click)="startShowMessages()">Display a sequence of messages</button>
  `
})
export class NzDemoMessageCloseComponent {
  constructor(private message: NzMessageService) {}

  startShowMessages(): void {
    this.message
      .loading('Action in progress', { nzDuration: 2500 })
      .onClose!.pipe(
        concatMap(() => this.message.success('Loading finished', { nzDuration: 2500 }).onClose!),
        concatMap(() => this.message.info('Loading finished is finished', { nzDuration: 2500 }).onClose!)
      )
      .subscribe(() => {
        console.log('All completed!');
      });
  }
}

Messages of success, error and warning types.

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

@Component({
  selector: 'nz-demo-message-other',
  template: `
    <button nz-button (click)="createMessage('success')">Success</button>
    <button nz-button (click)="createMessage('error')">Error</button>
    <button nz-button (click)="createMessage('warning')">Warning</button>
  `,
  styles: [
    `
      [nz-button] {
        margin-right: 8px;
      }
    `
  ]
})
export class NzDemoMessageOtherComponent {
  createMessage(type: string): void {
    this.message.create(type, `This is a message of ${type}`);
  }

  constructor(private message: NzMessageService) {}
}

Display a global loading indicator, which is dismissed by itself asynchronously.

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

@Component({
  selector: 'nz-demo-message-loading',
  template: `
    <button nz-button [nzType]="'default'" (click)="createBasicMessage()">Display a loading indicator</button>
  `
})
export class NzDemoMessageLoadingComponent {
  constructor(private message: NzMessageService) {}

  createBasicMessage(): void {
    const id = this.message.loading('Action in progress..', { nzDuration: 0 }).messageId;
    setTimeout(() => {
      this.message.remove(id);
    }, 2500);
  }
}

API#

NzMessageService#

This components provides some service methods, with usage and arguments as following:

  • NzMessageService.success(content, [options])
  • NzMessageService.error(content, [options])
  • NzMessageService.info(content, [options])
  • NzMessageService.warning(content, [options])
  • NzMessageService.loading(content, [options])
ArgumentDescriptionTypeDefault
contentThe content of messagestring | TemplateRef<void>-
optionsSupport setting the parameters for the current message box, see the table belowobject-

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

ArgumentDescriptionType
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

Methods for destruction are also provided:

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

Global configuration (NZ_MESSAGE_CONFIG)#

ArgumentDescriptionTypeDefault
nzDurationDuration (milliseconds), does not disappear when set to 0number3000
nzMaxStackThe maximum number of messages 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
nzTopDistance from topnumber | string24

NzMessageDataFilled#

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

export interface NzMessageDataFilled {
  onClose: Subject<false>; // It would emit an event when the message is closed
}