Customized Close Text

Alert

Alert component for feedback.

Import

Source

components/alert

Docs

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.

Examples#

Success Text

The simplest usage for short messages.

      Loading...

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.

      Loading...

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.

      Loading...

S

Success TipsDetailed description and advices about successful copywriting.

Make information more clear and more friendly and meet customized needs.

      Loading...

Success Text

Info Text

Warning Text

Error Text

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

      Loading...

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.

      Loading...

Info Text

Customized Close Text

Replace the default icon with customized content.

      Loading...

Success Text

Error Text

Error Description Error Description Error Description Error Description

Warning Text

Info Text

Info Description Info Description Info Description Info Description

Custom action.

      Loading...

Pass nz-alert-marquee as the [nzMessage] template content of a nzBanner alert to create a scrolling loop banner. Use nzPauseOnHover to pause the animation on mouse hover, and nzSpeed to control the scrolling speed in pixels per second (default 50, higher value = faster scrolling).

      Loading...

21.2.0

API#

nz-alertcomponent#

Property	Description	Type	Default	Global Config
`[nzBanner]`	Whether to show as banner	`boolean`	`false`
`[nzAction]`	Customized alert's action	`string \| TemplateRef<void>`	-
`[nzCloseable]`	Whether Alert can be closed	`boolean`	-	✅
`[nzCloseText]`	Close text to show	`string \| TemplateRef<void>`	-
`[nzDescription]`	Additional content of Alert	`string \| TemplateRef<void>`	-
`[nzMessage]`	Content of Alert	`string \| TemplateRef<void>`	-
`[nzShowIcon]`	Whether to show icon, in `nzBanner` mode default is `true`	`boolean`	`false`	✅
`[nzIconType]`	Icon type, effective when `nzShowIcon` is `true`	`string`	-
`[nzType]`	Type of Alert styles, in `nzBanner` mode default is `'warning'`	`'success' \| 'info' \| 'warning' \| 'error'`	`'info'`
`[nzIcon]`	Custom icon, effective when showIcon is true	`string \| TemplateRef<void>`	-
`(nzOnClose)`	Callback when Alert is closed	`EventEmitter<void>`	-

nz-alert-marqueecomponent#

Use nz-alert-marquee as the [nzMessage] template content to create a scrolling loop banner inside an alert.

Property	Description	Type	Default
`[nzPauseOnHover]`	Whether to pause the scrolling animation on mouse hover	`boolean`	`false`
`[nzSpeed]`	Animation speed in pixels per second (higher = faster scrolling)	`number`	`50`