Angular Tag Box - Tag Count Limitation

You can use the maxDisplayedTags property to limit the number of displayed tags. When the specified limit is exceeded, the tags are combined into a single multi-tag that displays the number of selected items. Use the showMultiTagOnly property to specify whether to display a multi-tag only or other tags as well. You can also use onMultiTagPreparing event handler to customize the multi-tag, as shown in the second example.

Backend API

<div> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label"> Multi-tag for several items </div> <div class="dx-field-value"> <dx-tag-box [items]="products" [value]="[1, 2, 3, 4]" displayExpr="Name" valueExpr="Id" [showSelectionControls]="true" selectAllMode="allPages" [maxDisplayedTags]="3" [inputAttr]="{ 'aria-label': 'Product' }" ></dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label"> Multi-tag for all items </div> <div class="dx-field-value"> <dx-tag-box [items]="slicedProducts" [value]="[1, 2, 3, 4, 5]" displayExpr="Name" valueExpr="Id" [showSelectionControls]="true" (onMultiTagPreparing)="onMultiTagPreparing($event)" [maxDisplayedTags]="3" [inputAttr]="{ 'aria-label': 'Product' }" ></dx-tag-box> </div> </div> <div class="dx-field"> <div class="dx-field-label"> Multi-tag with ordinary tags </div> <div class="dx-field-value"> <dx-tag-box [items]="products" [value]="[1, 2, 3, 4, 5, 6, 7]" displayExpr="Name" valueExpr="Id" [showSelectionControls]="true" selectAllMode="allPages" [maxDisplayedTags]="2" [showMultiTagOnly]="false" [inputAttr]="{ 'aria-label': 'Product' }" ></dx-tag-box> </div> </div> </div> </div>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxTagBoxModule, DxTagBoxTypes } from 'devextreme-angular/ui/tag-box'; import { Product, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [Service], templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxTagBoxModule, ], }) export class AppComponent { products: Product[]; slicedProducts: Product[]; constructor(service: Service) { this.products = service.getProducts(); this.slicedProducts = this.products.slice(0, 5); } onMultiTagPreparing(args: DxTagBoxTypes.MultiTagPreparingEvent) { const selectedItemsLength = args.selectedItems.length; const totalCount = 5; if (selectedItemsLength < totalCount) { args.cancel = true; } else { args.text = `All selected (${selectedItemsLength})`; } } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep .dx-field { margin-bottom: 50px; }

import { Injectable } from '@angular/core'; export class Product { Id: number; Name: string; Price: number; Current_Inventory: number; Backorder: number; Manufacturing: number; Category: string; ImageSrc: string; } const products: Product[] = [{ Id: 1, Name: 'HD Video Player', Price: 330, Current_Inventory: 225, Backorder: 0, Manufacturing: 10, Category: 'Video Players', ImageSrc: '../../../../images/products/1.png', }, { Id: 2, Name: 'SuperHD Video Player', Price: 400, Current_Inventory: 150, Backorder: 0, Manufacturing: 25, Category: 'Video Players', ImageSrc: '../../../../images/products/2.png', }, { Id: 3, Name: 'SuperPlasma 50', Price: 2400, Current_Inventory: 0, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: '../../../../images/products/3.png', }, { Id: 4, Name: 'SuperLED 50', Price: 1600, Current_Inventory: 77, Backorder: 0, Manufacturing: 55, Category: 'Televisions', ImageSrc: '../../../../images/products/4.png', }, { Id: 5, Name: 'SuperLED 42', Price: 1450, Current_Inventory: 445, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: '../../../../images/products/5.png', }, { Id: 6, Name: 'SuperLCD 55', Price: 1350, Current_Inventory: 345, Backorder: 0, Manufacturing: 5, Category: 'Televisions', ImageSrc: '../../../../images/products/6.png', }, { Id: 7, Name: 'SuperLCD 42', Price: 1200, Current_Inventory: 210, Backorder: 0, Manufacturing: 20, Category: 'Televisions', ImageSrc: '../../../../images/products/7.png', }, { Id: 8, Name: 'SuperPlasma 65', Price: 3500, Current_Inventory: 0, Backorder: 0, Manufacturing: 0, Category: 'Televisions', ImageSrc: '../../../../images/products/8.png', }, { Id: 9, Name: 'SuperLCD 70', Price: 4000, Current_Inventory: 95, Backorder: 0, Manufacturing: 5, Category: 'Televisions', ImageSrc: '../../../../images/products/9.png', }, { Id: 10, Name: 'DesktopLED 21', Price: 175, Current_Inventory: null, Backorder: 425, Manufacturing: 75, Category: 'Monitors', ImageSrc: '../../../../images/products/10.png', }, { Id: 12, Name: 'DesktopLCD 21', Price: 170, Current_Inventory: 210, Backorder: 0, Manufacturing: 60, Category: 'Monitors', ImageSrc: '../../../../images/products/12.png', }, { Id: 13, Name: 'DesktopLCD 19', Price: 160, Current_Inventory: 150, Backorder: 0, Manufacturing: 210, Category: 'Monitors', ImageSrc: '../../../../images/products/13.png', }, { Id: 14, Name: 'Projector Plus', Price: 550, Current_Inventory: null, Backorder: 55, Manufacturing: 10, Category: 'Projectors', ImageSrc: '../../../../images/products/14.png', }, { Id: 15, Name: 'Projector PlusHD', Price: 750, Current_Inventory: 110, Backorder: 0, Manufacturing: 90, Category: 'Projectors', ImageSrc: '../../../../images/products/15.png', }, { Id: 16, Name: 'Projector PlusHT', Price: 1050, Current_Inventory: 0, Backorder: 75, Manufacturing: 57, Category: 'Projectors', ImageSrc: '../../../../images/products/16.png', }, { Id: 17, Name: 'ExcelRemote IR', Price: 150, Current_Inventory: 650, Backorder: 0, Manufacturing: 190, Category: 'Automation', ImageSrc: '../../../../images/products/17.png', }, { Id: 18, Name: 'ExcelRemote Bluetooth', Price: 180, Current_Inventory: 310, Backorder: 0, Manufacturing: 0, Category: 'Automation', ImageSrc: '../../../../images/products/18.png', }, { Id: 19, Name: 'ExcelRemote IP', Price: 200, Current_Inventory: 0, Backorder: 325, Manufacturing: 225, Category: 'Automation', ImageSrc: '../../../../images/products/19.png', }, ]; @Injectable() export class Service { getProducts(): Product[] { return products; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>