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

private readonly message = inject(NzMessageService);

Normal messages as feedbacks.

      Loading...

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

      Loading...

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

      Loading...

Messages of success, error and warning types.

      Loading...

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

      Loading...

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

Argument	Description	Type	Default
content	The content of message	`string \| TemplateRef<void>`	-
options	Support setting the parameters for the current message box, see the table below	`object`	-

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

Argument	Description	Type
nzDuration	Duration (milliseconds), does not disappear when set to 0	`number`
nzPauseOnHover	Do not remove automatically when mouse is over while setting to `true`	`boolean`
nzAnimate	Whether to turn on animation	`boolean`

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)

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

Argument	Description	Type	Default
nzDuration	Duration (milliseconds), does not disappear when set to 0	`number`	`3000`
nzMaxStack	The maximum number of messages that can be displayed at the same time	`number`	`7`
nzPauseOnHover	Do not remove automatically when mouse is over while setting to `true`	`boolean`	`true`
nzAnimate	Whether to turn on animation	`boolean`	`true`
nzTop	Distance from top	`number \| string`	`24`
nzDirection	Direction of the text in the messages	`'ltr' \| 'rtl'`	-

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
}