Empty

Empty state placeholder.

When To Use#

When there is no data provided, display for friendly tips.

Examples

empty

No Data

Simplest usage.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-empty-basic',
  template: `
    <nz-empty></nz-empty>
  `,
  styles: []
})
export class NzDemoEmptyBasicComponent {}
empty

Customize Description

Customize image, description and extra content.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-empty-customize',
  template: `
    <nz-empty
      [nzNotFoundImage]="
        'https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original'
      "
      [nzNotFoundContent]="contentTpl"
      [nzNotFoundFooter]="footerTpl"
    >
      <ng-template #contentTpl>
        <span> Customize <a href="#API">Description</a> </span>
      </ng-template>
      <ng-template #footerTpl>
        <button nz-button nzType="primary" (click)="onClick()">Create Now</button>
      </ng-template>
    </nz-empty>
  `,
  styles: []
})
export class NzDemoEmptyCustomizeComponent {
  onClick(): void {
    console.log('clicked');
  }
}

Select

TreeSelect

Cascader

Transfer

0 item
empty

No Data

0 item
empty

No Data

Table

Title
Age
empty

No Data

List

empty

No Data

Use NzEmptyService set global Empty style.

expand codeexpand code
import { Component, TemplateRef, ViewChild } from '@angular/core';
import { NzEmptyService } from 'ng-zorro-antd';

@Component({
  selector: 'nz-demo-empty-config',
  template: `
    <nz-switch
      [nzUnCheckedChildren]="'default'"
      [nzCheckedChildren]="'customize'"
      [(ngModel)]="customize"
      (ngModelChange)="onConfigChange()"
    >
    </nz-switch>

    <nz-divider></nz-divider>

    <h3>Select</h3>
    <nz-select style="width: 200px"></nz-select>

    <h3>TreeSelect</h3>
    <nz-tree-select style="width: 200px;"></nz-tree-select>

    <h3>Cascader</h3>
    <nz-cascader style="width: 200px;" [nzShowSearch]="true" [nzOptions]="[]"></nz-cascader>

    <h3>Transfer</h3>
    <nz-transfer></nz-transfer>

    <h3>Table</h3>
    <nz-table>
      <thead>
        <tr>
          <th>Title</th>
          <th>Age</th>
        </tr>
      </thead>
    </nz-table>

    <h3>List</h3>
    <nz-list [nzDataSource]="[]"></nz-list>

    <ng-template #customTpl let-name>
      <div style="text-align: center;">
        <i nz-icon type="smile" style="font-size: 20px;"></i>
        <p>Data Not Found in {{ name }}</p>
      </div>
    </ng-template>
  `,
  styles: [
    `
      h3 {
        font-size: inherit;
        margin: 16px 0 8px 0;
      }
    `
  ]
})
export class NzDemoEmptyConfigComponent {
  @ViewChild('customTpl') customTpl: TemplateRef<any>; // tslint:disable-line:no-any

  customize = false;

  constructor(private nzEmptyService: NzEmptyService) {}

  onConfigChange(): void {
    if (this.customize) {
      this.nzEmptyService.setDefaultContent(this.customTpl); // tslint:disable-line:no-any
    } else {
      this.nzEmptyService.resetDefault();
    }
  }
}

API#

Import this Component Individually#

You can get more detail here.

import { NzEmptyModule } from 'ng-zorro-antd';

nz-empty#

PropertyDescriptionTypeDefault
[nzNotFoundImage]Customize image. Will tread as image url when string providedstringTemplateRef<void>-
[nzNotFoundContent]Custom descriptionstringTemplateRef<void>-
[nzNotFoundFooter]Custom FooterstringTemplateRef<void>-

NzEmptyService#

Methods/PropertiesDescriptionParameters
setDefaultContentTo set the default empty content. The parent component name would be passed to the template.TemplateRef<string>string
resetDefaultReset default empty content-

InjectionToken#

TokenDescriptionParameters
NZ_DEFAULT_EMPTY_CONTENTTo provide a user default empty componentComponentstring
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. And you can even render a user default empty component, either by providing a NZ_DEFAULT_EMPTY_CONTENT in your root module or invoke setDefaultEmptyContent.