The Syncfusion Angular UI suite is maturing every release with the addition of new components. We are excited to introduce the Angular Chips component, which is included in our 2018 Volume 4 release. These chips are used in various real-world applications, like filter option tags and contact tags in email apps. They can be used to trigger simple actions.
In this post, we will integrate the Syncfusion Angular Chips component into an Angular CLI application and define it in different use cases. We can customize its appearance using a variety of built-in options.
| npm install -g @angular/cli |
| ng new ngChip cd ngChip ng serve |
| npm install @syncfusion/ej2-angular-buttons –save |
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ChipListAllModule } from '@syncfusion/ej2-angular-buttons';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule, ChipListAllModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
/* You can add global styles to this file, and also import other style files */
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
<ejs-chiplist id="chip-default">
<e-chips>
<e-chip text="Apple" cssClass="e-primary"></e-chip>
<e-chip text="Microsoft" cssClass="e-info"></e-chip>
<e-chip text="Google" cssClass="e-success"></e-chip>
<e-chip text="Tesla" cssClass="e-warning"></e-chip>
<e-chip text="Intel" cssClass="e-danger"></e-chip>
</e-chips>
</ejs-chiplist>
We can use action chips if we want to perform specific actions. The action chip will trigger an action with the user selection of the chip.
The actions of chips are done by binding click events. These events return the text of chips and chip elements.
<ejs-chiplist id="chip-default" (click)="onClick($event)" >
<e-chips>
<e-chip text="Apple" ></e-chip>
<e-chip text="Microsoft" ></e-chip>
<e-chip text="Google" ></e-chip>
<e-chip text="Tesla" ></e-chip>
<e-chip text="Intel" ></e-chip>
</e-chips>
</ejs-chiplist>
export class AppComponent {
title = "ngChip";
onClick(args) {
console.log(args);
}
}
Choice chips provide a set of options end users can select a single option from.
Enable the choice chips feature by setting the selection API value as single.
<ejs-chiplist id="chip-default" selection="Single" cssClass="e-outline" >
<e-chips>
<e-chip text="Apple" ></e-chip>
<e-chip text="Microsoft" ></e-chip>
<e-chip text="Google" ></e-chip>
<e-chip text="Tesla" ></e-chip>
<e-chip text="Intel" ></e-chip>
</e-chips>
</ejs-chiplist>
Filter chips have a collection of options. These types of chips allow users to select multiple options from a set of options. We can use filter chips if we want to showcase or filter user view items based on selections.
We can enable the filter option by setting the selection API value as multiple.
<ejs-chiplist id="chip-default" selection="Multiple" cssClass="e-outline" >
<e-chips>
<e-chip text="Apple" ></e-chip>
<e-chip text="Microsoft" ></e-chip>
<e-chip text="Google" ></e-chip>
<e-chip text="Tesla" ></e-chip>
<e-chip text="Intel" ></e-chip>
</e-chips>
</ejs-chiplist>
The input chips have options for adding and removing chips. The chips can be created from user-entered text in an input box. You can delete the option chips from the input box chips collection if you don’t need them.
We can enable the input chips option by setting the value for the enableDelete API as true.
<ejs-chiplist id="chip-default" selection="Multiple" cssClass="e-outline" enableDelete="true">
<e-chips>
<e-chip text="Apple" ></e-chip>
<e-chip text="Microsoft" ></e-chip>
<e-chip text="Google" ></e-chip>
<e-chip text="Tesla" ></e-chip>
<e-chip text="Intel" ></e-chip>
</e-chips>
</ejs-chiplist>
Chips have predefined classes to show the chip element states as follows:
Chips are viewable with different Essential JS 2 themes. The following themes are available for chips:
| Material | |
| Fabric | |
| Bootstrap | |
| High Contrast |
We can customize the appearance of the chips by using the Syncfusion Theme Studio application.
The Angular Chips component is also available in React, Vue, ASP.NET Core, and MVC frameworks and is built from platform-specific TypeScript libraries.
In this blog, we learned how to integrate the Angular Chips component, different use cases of chips, and how to integrate chips in an Angular CLI application.
Feel free to check out the Chips source on GitHub, live demos in the sample browser, and the various customization features in the documentation. Also, be sure to check out the readily runnable Chips sample on GitHub to see just how easy it is to create and configure chips.
If you have any questions or require clarification, please let us know in the comments section below. You can also contact us through our support forum or Direct-Trac. We are happy to assist you!
If you like this blog post, we think you’ll also like the following free resources: