Angular Smart Chip Container
This Library introduces an Intelligent way to hold Material Chips to make it only take the space needed.
How to use
Install
Run npm install ngs-chip-container@latest to install the latest version of Ngs Chip Container.
Importing into Module with default Configuration
@NgModule({
imports: [
NgsChipContainerModule.forRoot({
maxChipCount: 3, // Default Number of chips to be shown
tooltipLinebreak: true, // Default line break configuration for Tooltips
maxCharCount: 3, // Default Number of characters for chips to be shown
expandable: true // More chip will be expandable on click
})
]
})Importing into Module without default Configuration
@NgModule({
imports: [
NgsChipContainerModule
]
})Using In Component - Simple
<mat-chip-list>
<ngs-chip-container [maxChipCount]="3" tooltipLinebreak expandable> // optional component specific configuration
<mat-chip *ngsChip="Name1">{{Name1}}</mat-chip>
<mat-chip *ngsChip="Name2">{{Name2}}</mat-chip>
<mat-chip *ngsChip="Name3">{{Name3}}</mat-chip>
<mat-chip *ngsChip="Name4">{{Name4}}</mat-chip>
</ngs-chip-container>
</mat-chip-list>Using In Component - with loops
<mat-chip-list>
<ngs-chip-container [maxCharCount]="50"> // optional component specific configuration
<ng-container *ngFor="let name of Names">
<mat-chip *ngsChip="name">{{name}}</mat-chip>
</ng-container>
</ngs-chip-container>
</mat-chip-list>Further help
Please contact me via filing an Issue or directly E-mail at sachithrukshanmail@gmail.com.