Tag

Tag for categorizing or markup.

When To Use#

  • It can be used to tag by dimension or property.

  • When categorizing.

Import this Component Individually#

You can get more detail here.

import { NzTagModule } from 'ng-zorro-antd/tag';

Examples

Tag 1LinkTag 2Prevent Default

Usage of basic Tag, and it could be closeable by set nzMode="closeable" property. Closeable Tag supports nzOnClose events.

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

@Component({
  selector: 'nz-demo-tag-basic',
  template: `
    <nz-tag>Tag 1</nz-tag>
    <nz-tag>
      <a href="https://github.com/NG-ZORRO/ng-zorro-antd">Link</a>
    </nz-tag>
    <nz-tag nzMode="closeable" (nzOnClose)="onClose()">Tag 2</nz-tag>
    <nz-tag nzMode="closeable" (nzOnClose)="preventDefault($event)">Prevent Default</nz-tag>
  `
})
export class NzDemoTagBasicComponent {
  onClose(): void {
    console.log('tag was closed.');
  }

  preventDefault(e: Event): void {
    e.preventDefault();
    e.stopPropagation();
    console.log('tag can not be closed.');
  }
}
Unremovable Tag 2 Tag 3 New Tag

Generating a set of Tags by array, you can add and remove dynamically.

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

@Component({
  selector: 'nz-demo-tag-control',
  template: `
    <nz-tag
      *ngFor="let tag of tags; let i = index"
      [nzMode]="i === 0 ? 'default' : 'closeable'"
      (nzAfterClose)="handleClose(tag)"
    >
      {{ sliceTagName(tag) }}
    </nz-tag>
    <nz-tag *ngIf="!inputVisible" class="editable-tag" nzNoAnimation (click)="showInput()">
      <i nz-icon nzType="plus"></i> New Tag
    </nz-tag>
    <input
      #inputElement
      nz-input
      nzSize="small"
      *ngIf="inputVisible"
      type="text"
      [(ngModel)]="inputValue"
      style="width: 78px;"
      (blur)="handleInputConfirm()"
      (keydown.enter)="handleInputConfirm()"
    />
  `,
  styles: [
    `
      .editable-tag {
        background: rgb(255, 255, 255);
        border-style: dashed;
      }
    `
  ]
})
export class NzDemoTagControlComponent {
  tags = ['Unremovable', 'Tag 2', 'Tag 3'];
  inputVisible = false;
  inputValue = '';
  @ViewChild('inputElement', { static: false }) inputElement: ElementRef;

  handleClose(removedTag: {}): void {
    this.tags = this.tags.filter(tag => tag !== removedTag);
  }

  sliceTagName(tag: string): string {
    const isLongTag = tag.length > 20;
    return isLongTag ? `${tag.slice(0, 20)}...` : tag;
  }

  showInput(): void {
    this.inputVisible = true;
    setTimeout(() => {
      this.inputElement.nativeElement.focus();
    }, 10);
  }

  handleInputConfirm(): void {
    if (this.inputValue && this.tags.indexOf(this.inputValue) === -1) {
      this.tags = [...this.tags, this.inputValue];
    }
    this.inputValue = '';
    this.inputVisible = false;
  }
}
Categories: Movie Books Music Sports

Select your favourite topics.

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

const tagsFromServer = ['Movie', 'Books', 'Music', 'Sports'];

@Component({
  selector: 'nz-demo-tag-hot-tags',
  template: `
    <strong>Categories: </strong>
    <nz-tag
      *ngFor="let tag of hotTags"
      nzMode="checkable"
      [nzChecked]="selectedTags.indexOf(tag) > -1"
      (nzCheckedChange)="handleChange($event, tag)"
    >
      {{ tag }}
    </nz-tag>
  `
})
export class NzDemoTagHotTagsComponent {
  hotTags = tagsFromServer;
  selectedTags: string[] = [];

  handleChange(checked: boolean, tag: string): void {
    if (checked) {
      this.selectedTags.push(tag);
    } else {
      this.selectedTags = this.selectedTags.filter(t => t !== tag);
    }
    console.log('You are interested in: ', this.selectedTags);
  }
}

Presets:

magentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple

Custom:

#f50#2db7f5#87d068#108ee9

We preset a series of colorful tag style for different situation usage. And you can always set it to a hex color string for custom color.

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

@Component({
  selector: 'nz-demo-tag-colorful',
  encapsulation: ViewEncapsulation.None,
  template: `
    <h4 style="margin-bottom: 16px;">Presets:</h4>
    <div>
      <nz-tag [nzColor]="'magenta'">magenta</nz-tag>
      <nz-tag [nzColor]="'red'">red</nz-tag>
      <nz-tag [nzColor]="'volcano'">volcano</nz-tag>
      <nz-tag [nzColor]="'orange'">orange</nz-tag>
      <nz-tag [nzColor]="'gold'">gold</nz-tag>
      <nz-tag [nzColor]="'lime'">lime</nz-tag>
      <nz-tag [nzColor]="'green'">green</nz-tag>
      <nz-tag [nzColor]="'cyan'">cyan</nz-tag>
      <nz-tag [nzColor]="'blue'">blue</nz-tag>
      <nz-tag [nzColor]="'geekblue'">geekblue</nz-tag>
      <nz-tag [nzColor]="'purple'">purple</nz-tag>
    </div>
    <h4 style="margin: 16px 0px;'">Custom:</h4>
    <div>
      <nz-tag [nzColor]="'#f50'">#f50</nz-tag>
      <nz-tag [nzColor]="'#2db7f5'">#2db7f5</nz-tag>
      <nz-tag [nzColor]="'#87d068'">#87d068</nz-tag>
      <nz-tag [nzColor]="'#108ee9'">#108ee9</nz-tag>
    </div>
  `,
  styles: [
    `
      .ant-tag {
        margin-bottom: 8px;
      }
    `
  ]
})
export class NzDemoTagColorfulComponent {}
Tag1Tag2Tag3

nzMode="checkable" works like Checkbox, click it to toggle checked state.

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

@Component({
  selector: 'nz-demo-tag-checkable',
  template: `
    <nz-tag nzMode="checkable" [nzChecked]="true" (nzCheckedChange)="checkChange($event)">Tag1</nz-tag>
    <nz-tag nzMode="checkable" [nzChecked]="true" (nzCheckedChange)="checkChange($event)">Tag2</nz-tag>
    <nz-tag nzMode="checkable" [nzChecked]="true" (nzCheckedChange)="checkChange($event)">Tag3</nz-tag>
  `
})
export class NzDemoTagCheckableComponent {
  checkChange(e: boolean): void {
    console.log(e);
  }
}

API#

Tag#

PropertyDescriptionTypeDefault
[nzMode]Mode of tag'closeable' | 'default' | 'checkable''default'
[nzChecked]Checked status of Tag, double binding, only works when nzMode="checkable"booleanfalse
[nzColor]Color of the Tagstring-
(nzOnClose)Callback executed when tag is closed, only works when nzMode="closable"EventEmitter<MouseEvent>-
(nzCheckedChange)Checked status change call back, only works when nzMode="checkable"EventEmitter<boolean>-