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 { NzMessageModule } from 'ng-zorro-antd/message';

Examples

Normal messages as feedbacks.

expand codeexpand code
      Loading...
    

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

expand codeexpand code
      Loading...
    

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

expand codeexpand code
      Loading...
    

Messages of success, error and warning types.

expand codeexpand code
      Loading...
    

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

expand codeexpand code
      Loading...
    

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#

You can use NzConfigService to configure this component globally. Please check the Global Configuration chapter for more information.

ArgumentDescriptionTypeDefault
nzDurationDuration (milliseconds), does not disappear when set to 0number3000
nzMaxStackThe maximum number of messages that can be displayed at the same timenumber7
nzPauseOnHoverDo not remove automatically when mouse is over while setting to truebooleantrue
nzAnimateWhether to turn on animationbooleantrue
nzTopDistance from topnumber | string24
nzDirectionDirection of the text in the messages'ltr' | 'rtl'-

NzMessageRef#

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

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