Empty

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.

expand codeexpand code
      Loading...
    

No Data

You can choose another style of image by setting simple to nzNotFoundImage.

expand codeexpand code
      Loading...
    
empty

Customize Description

Customize image, description and extra content.

expand codeexpand code
      Loading...
    

Select

TreeSelect

Cascader

Please select

Transfer

0 item

No Data

0 item

No Data

Table

TitleAge

No Data

List

No Data

Use NzEmptyService set global Empty style.

expand codeexpand code
      Loading...
    

Simplest Usage with no description.

expand codeexpand code
      Loading...
    

API#

nz-empty#

PropertyDescriptionTypeDefault
[nzNotFoundImage]Customize image. Will tread as image url when string providedstring | TemplateRef<void>-
[nzNotFoundContent]Custom descriptionstring | TemplateRef<void> | null-
[nzNotFoundFooter]Custom Footerstring | TemplateRef<void>-

NZ_CONFIG#

The nzEmpty interface has properties as follows:

PropertiesDescriptionType
nzDefaultEmptyContentUser default empty component. You can restore the system default empty content by providing undefinedType<any>|TemplateRef<string>|string|undefined

InjectionToken#

TokenDescriptionParameters
NZ_EMPTY_COMPONENT_NAMEWould be injected to NZ_DEFAULT_EMPTY_CONTENT, telling that component its parent component's namestring

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
    }
  }
}