ngs-chip-container

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 [e-mail].