List

Simple List.

When To Use#

A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.

Examples

Default Size

Header
Racing car sprays burning fuel into crowd.
Japanese princess to wed commoner.
Australian walks 100km after outback crash.
Man charged over missing wedding girl.
Los Angeles battles huge wildfires.

Small Size

Header
Racing car sprays burning fuel into crowd.
Japanese princess to wed commoner.
Australian walks 100km after outback crash.
Man charged over missing wedding girl.
Los Angeles battles huge wildfires.

Large Size

Header
Racing car sprays burning fuel into crowd.
Japanese princess to wed commoner.
Australian walks 100km after outback crash.
Man charged over missing wedding girl.
Los Angeles battles huge wildfires.

Ant Design supports a default list size as well as a large and small size.

If a large or small list is desired, set the size property to either large or small respectively. Omit the size property for a list with the default size.

Customizing the nzHeader and nzFooter of list by setting nzHeader and nzFooter property.

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

@Component({
  selector: 'nz-demo-list-simple',
  template: `
    <h3 [ngStyle]="{ 'margin-bottom.px': 16 }">Default Size</h3>
    <nz-list [nzDataSource]="data" nzBordered [nzHeader]="'Header'" [nzFooter]="'Footer'" [nzRenderItem]="item">
      <ng-template #item let-item><nz-list-item [nzContent]="item"></nz-list-item></ng-template>
    </nz-list>
    <h3 [ngStyle]="{ margin: '16px 0' }">Small Size</h3>
    <nz-list
      [nzDataSource]="data"
      nzBordered
      nzSize="small"
      [nzHeader]="'Header'"
      [nzFooter]="'Footer'"
      [nzRenderItem]="item"
    >
      <ng-template #item let-item><nz-list-item [nzContent]="item"></nz-list-item></ng-template>
    </nz-list>
    <h3 [ngStyle]="{ margin: '16px 0' }">Large Size</h3>
    <nz-list
      [nzDataSource]="data"
      nzBordered
      nzSize="large"
      [nzHeader]="'Header'"
      [nzFooter]="'Footer'"
      [nzRenderItem]="item"
    >
      <ng-template #item let-item><nz-list-item [nzContent]="item"></nz-list-item></ng-template>
    </nz-list>
  `
})
export class NzDemoListSimpleComponent {
  data = [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.'
  ];
}

Ant Design Title 1

Ant Design, a design language for background applications, is refined by Ant UED Team

Ant Design Title 2

Ant Design, a design language for background applications, is refined by Ant UED Team

Ant Design Title 3

Ant Design, a design language for background applications, is refined by Ant UED Team

Ant Design Title 4

Ant Design, a design language for background applications, is refined by Ant UED Team

Basic list.

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

@Component({
  selector: 'nz-demo-list-basic',
  template: `
    <div style="margin-bottom: 8px;"><button nz-button (click)="change()">Switch Data</button></div>
    <nz-list [nzDataSource]="data" [nzRenderItem]="item" [nzItemLayout]="'horizontal'" [nzLoading]="loading">
      <ng-template #item let-item>
        <nz-list-item>
          <nz-list-item-meta
            [nzTitle]="nzTitle"
            nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            nzDescription="Ant Design, a design language for background applications, is refined by Ant UED Team"
          >
            <ng-template #nzTitle>
              <a href="https://ng.ant.design">{{ item.title }}</a>
            </ng-template>
          </nz-list-item-meta>
        </nz-list-item>
      </ng-template>
    </nz-list>
  `
})
export class NzDemoListBasicComponent {
  loading = false;
  data = [
    {
      title: 'Ant Design Title 1'
    },
    {
      title: 'Ant Design Title 2'
    },
    {
      title: 'Ant Design Title 3'
    },
    {
      title: 'Ant Design Title 4'
    }
  ];

  change(): void {
    this.loading = true;
    if (this.data.length > 0) {
      setTimeout(() => {
        this.data = [];
        this.loading = false;
      }, 1000);
    } else {
      setTimeout(() => {
        this.data = [
          {
            title: 'Ant Design Title 1'
          },
          {
            title: 'Ant Design Title 2'
          },
          {
            title: 'Ant Design Title 3'
          },
          {
            title: 'Ant Design Title 4'
          }
        ];
        this.loading = false;
      }, 1000);
    }
  }
}

Load more list with loadMore property.

expand codeexpand code
// tslint:disable:no-any
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';

const count = 5;
const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';

@Component({
  selector: 'nz-demo-list-loadmore',
  template: `
    <nz-list
      class="demo-loadmore-list"
      [nzDataSource]="list"
      [nzItemLayout]="'horizontal'"
      [nzLoading]="initLoading"
      [nzRenderItem]="item"
      [nzLoadMore]="loadMore"
    >
      <ng-template #item let-item>
        <nz-list-item
          [nzContent]="item.loading ? '' : 'content'"
          [nzActions]="item.loading ? [] : [editAction, moreAction]"
        >
          <nz-skeleton [nzAvatar]="true" [nzActive]="true" [nzTitle]="false" [nzLoading]="item.loading">
            <ng-template #editAction><a (click)="edit(item)">edit</a></ng-template>
            <ng-template #moreAction><a (click)="edit(item)">more</a></ng-template>
            <nz-list-item-meta
              [nzTitle]="nzTitle"
              nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              nzDescription="Ant Design, a design language for background applications, is refined by Ant UED Team"
            >
              <ng-template #nzTitle>
                <a href="https://ng.ant.design">{{ item.name.last }}</a>
              </ng-template>
            </nz-list-item-meta>
          </nz-skeleton>
        </nz-list-item>
      </ng-template>
      <ng-template #loadMore>
        <div class="loadmore">
          <button nz-button *ngIf="!loadingMore" (click)="onLoadMore()">loading more</button>
        </div>
      </ng-template>
    </nz-list>
  `,
  styles: [
    `
      .demo-loadmore-list {
        min-height: 350px;
      }
      .loadmore {
        text-align: center;
        margin-top: 12px;
        height: 32px;
        line-height: 32px;
      }
    `
  ]
})
export class NzDemoListLoadmoreComponent implements OnInit {
  initLoading = true; // bug
  loadingMore = false;
  data: any[] = [];
  list: Array<{ loading: boolean; name: any }> = [];

  constructor(private http: HttpClient, private msg: NzMessageService) {}

  ngOnInit(): void {
    this.getData((res: any) => {
      this.data = res.results;
      this.list = res.results;
      this.initLoading = false;
    });
  }

  getData(callback: (res: any) => void): void {
    this.http.get(fakeDataUrl).subscribe((res: any) => callback(res));
  }

  onLoadMore(): void {
    this.loadingMore = true;
    this.list = this.data.concat([...Array(count)].fill({}).map(() => ({ loading: true, name: {} })));
    this.http.get(fakeDataUrl).subscribe((res: any) => {
      this.data = this.data.concat(res.results);
      this.list = [...this.data];
      this.loadingMore = false;
    });
  }

  edit(item: any): void {
    this.msg.success(item.email);
  }
}

ant design part 0 (page: 1)

Ant Design, a design language for background applications, is refined by Ant UED Team.
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
  • 156
  • 156
  • 2
logo

ant design part 1 (page: 1)

Ant Design, a design language for background applications, is refined by Ant UED Team.
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
  • 156
  • 156
  • 2
logo

ant design part 2 (page: 1)

Ant Design, a design language for background applications, is refined by Ant UED Team.
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
  • 156
  • 156
  • 2
logo

ant design part 3 (page: 1)

Ant Design, a design language for background applications, is refined by Ant UED Team.
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
  • 156
  • 156
  • 2
logo

ant design part 4 (page: 1)

Ant Design, a design language for background applications, is refined by Ant UED Team.
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
  • 156
  • 156
  • 2
logo

Setting nzItemLayout property with vertical to create a vertical list.

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

@Component({
  selector: 'nz-demo-list-vertical',
  template: `
    <nz-list
      [nzDataSource]="data"
      [nzItemLayout]="'vertical'"
      [nzRenderItem]="item"
      [nzPagination]="pagination"
      [nzFooter]="footer"
    >
      <ng-template #item let-item>
        <nz-list-item [nzContent]="item.content" [nzActions]="[starAction, likeAction, msgAction]" [nzExtra]="extra">
          <ng-template #starAction><i nz-icon type="star-o" style="margin-right: 8px;"></i> 156</ng-template>
          <ng-template #likeAction><i nz-icon type="like-o" style="margin-right: 8px;"></i> 156</ng-template>
          <ng-template #msgAction><i nz-icon type="message" style="margin-right: 8px;"></i> 2</ng-template>
          <nz-list-item-meta [nzAvatar]="item.avatar" [nzTitle]="nzTitle" [nzDescription]="item.description">
            <ng-template #nzTitle
              ><a href="{{ item.href }}">{{ item.title }}</a></ng-template
            >
          </nz-list-item-meta>
          <ng-template #extra>
            <img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />
          </ng-template>
        </nz-list-item>
      </ng-template>
      <ng-template #footer>
        <div><b>ant design</b> footer part</div>
      </ng-template>
      <ng-template #pagination>
        <nz-pagination [nzPageIndex]="1" [nzTotal]="50" (nzPageIndexChange)="loadData($event)"></nz-pagination>
      </ng-template>
    </nz-list>
  `
})
export class NzDemoListVerticalComponent implements OnInit {
  // tslint:disable-next-line:no-any
  data: any[] = [];

  ngOnInit(): void {
    this.loadData(1);
  }

  loadData(pi: number): void {
    this.data = new Array(5).fill({}).map((_, index) => {
      return {
        href: 'http://ant.design',
        title: `ant design part ${index} (page: ${pi})`,
        avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
        description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
        content:
          'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'
      };
    });
  }
}
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content

Creating a grid list by setting the grid property of List

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

@Component({
  selector: 'nz-demo-list-grid',
  template: `
    <nz-list [nzDataSource]="data" [nzRenderItem]="item" [nzGrid]="{ gutter: 16, span: 6 }">
      <ng-template #item let-item>
        <nz-list-item [nzContent]="nzContent">
          <ng-template #nzContent>
            <nz-card [nzTitle]="item.title">
              Card content
            </nz-card>
          </ng-template>
        </nz-list-item>
      </ng-template>
    </nz-list>
  `
})
export class NzDemoListGridComponent {
  data = [
    {
      title: 'Title 1'
    },
    {
      title: 'Title 2'
    },
    {
      title: 'Title 3'
    },
    {
      title: 'Title 4'
    }
  ];
}
Title 1
Card content
Title 2
Card content
Title 3
Card content
Title 4
Card content
Title 5
Card content
Title 6
Card content

Responsive grid list. The size property is as same as Layout Grid.

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

@Component({
  selector: 'nz-demo-list-resposive',
  template: `
    <nz-list [nzDataSource]="data" [nzRenderItem]="item" [nzGrid]="{ gutter: 16, xs: 24, sm: 12, md: 6, lg: 6, xl: 4 }">
      <ng-template #item let-item>
        <nz-list-item [nzContent]="nzContent">
          <ng-template #nzContent>
            <nz-card [nzTitle]="item.title">
              Card content
            </nz-card>
          </ng-template>
        </nz-list-item>
      </ng-template>
    </nz-list>
  `
})
export class NzDemoListResposiveComponent {
  data = [
    {
      title: 'Title 1'
    },
    {
      title: 'Title 2'
    },
    {
      title: 'Title 3'
    },
    {
      title: 'Title 4'
    },
    {
      title: 'Title 5'
    },
    {
      title: 'Title 6'
    }
  ];
}

An example of infinite list & virtualized loading using cdk-virtual-scroll.

Virtualized rendering is a technique to mount big sets of data. It reduces the amount of rendered DOM nodes by tracking and hiding whatever isn't currently visible.

expand codeexpand code
// tslint:disable:no-any
import { CollectionViewer, DataSource } from '@angular/cdk/collections';
import { HttpClient } from '@angular/common/http';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';

@Component({
  selector: 'nz-demo-list-infinite-load',
  template: `
    <div>
      <cdk-virtual-scroll-viewport itemSize="73" class="demo-infinite-container">
        <nz-list>
          <nz-list-item *cdkVirtualFor="let item of ds">
            <nz-skeleton *ngIf="!item" [nzAvatar]="true" [nzParagraph]="{ rows: 1 }"></nz-skeleton>
            <nz-list-item-meta
              *ngIf="item"
              [nzTitle]="nzTitle"
              nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              [nzDescription]="item.email"
            >
              <ng-template #nzTitle>
                <a href="https://ng.ant.design">{{ item.name.last }}</a>
              </ng-template>
            </nz-list-item-meta>
          </nz-list-item>
        </nz-list>
      </cdk-virtual-scroll-viewport>
    </div>
  `,
  styles: [
    `
      .demo-infinite-container {
        height: 300px;
        border: 1px solid #e8e8e8;
        border-radius: 4px;
      }

      nz-list {
        padding: 24px;
      }
    `
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class NzDemoListInfiniteLoadComponent {
  ds = new MyDataSource(this.http);

  constructor(private http: HttpClient) {}
}

class MyDataSource extends DataSource<string | undefined> {
  private length = 100000;
  private pageSize = 10;
  private cachedData = Array.from<any>({ length: this.length });
  private fetchedPages = new Set<number>();
  private dataStream = new BehaviorSubject<any[]>(this.cachedData);
  private subscription = new Subscription();

  constructor(private http: HttpClient) {
    super();
  }

  connect(collectionViewer: CollectionViewer): Observable<any[]> {
    this.subscription.add(
      collectionViewer.viewChange.subscribe(range => {
        const startPage = this.getPageForIndex(range.start);
        const endPage = this.getPageForIndex(range.end - 1);
        for (let i = startPage; i <= endPage; i++) {
          this.fetchPage(i);
        }
      })
    );
    return this.dataStream;
  }

  disconnect(): void {
    this.subscription.unsubscribe();
  }

  private getPageForIndex(index: number): number {
    return Math.floor(index / this.pageSize);
  }

  private fetchPage(page: number): void {
    if (this.fetchedPages.has(page)) {
      return;
    }
    this.fetchedPages.add(page);

    this.http
      .get(`https://randomuser.me/api/?results=${this.pageSize}&inc=name,gender,email,nat&noinfo`)
      .subscribe((res: any) => {
        this.cachedData.splice(page * this.pageSize, this.pageSize, ...res.results);
        this.dataStream.next(this.cachedData);
      });
  }
}

API#

Import this Component Individually#

You can get more detail here.

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

nz-list#

PropertyDescriptionTypeDefault
[nzDataSource]Data source for listany[]-
[nzRenderItem]Custom item rendererTemplateRef<void>-
[nzBordered]Toggles rendering of the border around the listbooleanfalse
[nzFooter]List footer rendererstring|TemplateRef<void>-
[nzGrid]The grid type of list. You can set grid to something like {gutter: 16, column: 4}object-
[nzHeader]List header rendererstring|TemplateRef<void>-
[nzItemLayout]The layout of list, default is horizontal, If a vertical list is desired, set the itemLayout property to vertical'vertical'|'horizontal''horizontal'
[nzLoading]Shows a loading indicator while the contents of the list are being fetchedbooleanfalse
[nzLoadMore]Shows a load more contentTemplateRef<void>-
[nzNoResult]Specify content to show when list is emptystringTemplateRef<void>-
[nzPagination]Shows a pagination contentTemplateRef<void>-
[nzSize]Size of list'large'|'small'|'default''default'
[nzSplit]Toggles rendering of the split under the list itembooleantrue

nzGrid#

PropertyDescriptionTypeDefault
columncolumn of gridnumber-
gutterspacing between gridnumber0
xs<576px column of gridnumber-
sm≥576px column of gridnumber-
md≥768px column of gridnumber-
lg≥992px column of gridnumber-
xl≥1200px column of gridnumber-
xxl≥1600px column of gridnumber-

nz-list-item#

PropertyDescriptionTypeDefault
[nzContent]content rendererstring|TemplateRef<void>-
[nzActions]The actions content of list item. If itemLayout is vertical, shows the content on bottom, otherwise shows content on the far right.Array<TemplateRef<void>>-
[nzExtra]The extra content of list item. If itemLayout is vertical, shows the content on right, otherwise shows content on the far right.TemplateRef<void>-

nz-list-item-meta#

PropertyDescriptionTypeDefault
[nzAvatar]The avatar of list itemstring|TemplateRef<void>-
[nzDescription]The description of list itemstring|TemplateRef<void>-
[nzTitle]The title of list itemstring|TemplateRef<void>-