NG-ZORROEmpty
Empty state placeholder.
When To Use#
When there is no data provided, display for friendly tips.
import { NzEmptyModule } from 'ng-zorro-antd/empty';Examples
No Data
Simplest usage.
Loading...
No Data
You can choose another style of image by setting simple to nzNotFoundImage.
Loading...
Customize Description
Customize image, description and extra content.
Loading...
Select
TreeSelect
Cascader
Transfer
0 item
No Data
0 item
No Data
Table
| Title | Age |
|---|---|
No Data | |
List
No Data
Use NzEmptyService set global Empty style.
Loading...
Simplest Usage with no description.
Loading...
API#
nz-empty#
| Property | Description | Type | Default |
|---|---|---|---|
[nzNotFoundImage] | Customize image. Will tread as image url when string provided | string | TemplateRef<void> | - |
[nzNotFoundContent] | Custom description | string | TemplateRef<void> | null | - |
[nzNotFoundFooter] | Custom Footer | string | TemplateRef<void> | - |
NZ_CONFIG#
The nzEmpty interface has properties as follows:
| Properties | Description | Type |
|---|---|---|
nzDefaultEmptyContent | User default empty component. You can restore the system default empty content by providing undefined | Type<any>|TemplateRef<string>|string|undefined |
InjectionToken#
| Token | Description | Parameters |
|---|---|---|
NZ_EMPTY_COMPONENT_NAME | Would be injected to NZ_DEFAULT_EMPTY_CONTENT, telling that component its parent component's name | string |
Global Customizable Empty Content#
You may notice or used some inputs like nzNotFoundContent in some components. Now they would use Empty component. So you can provide nzDefaultEmptyContent to customize them.
{
provide: NZ_CONFIG,
useValue: {
empty: {
nzDefaultEmptyContent
}
}
}