Introducing Syncfusion’s New Angular Chips Component

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 mail boxes. They can be used to trigger simple actions.

In this post, let’s start integrating the Syncfusion Angular Chips component into an Angular CLI application and defining it in different use cases. We can customize its appearance using the built-in options of Chips.

Creating simple Angular Chips

  • Before starting on the Angular app, ensure your machine is configured with the prerequisites stated in the Angular guide.
  • Install Angular CLI using the following command.
npm install -g @angular/cli
  • Create and serve the default Angular CLI app using the following commands.
ng new ngChip
cd ngChip
ng serve

Configuring Angular Chips

  • Run the following command for installing Angular Chips and its dependencies.
npm install @syncfusion/ej2-angular-buttons –save
  • After the Angular Chips installation, import the Chip module ChipListAllModule into the src/app/app.module.ts file in the Angular CLI app.

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 { }

  • Import the Angular Chips style into the src/style.css

/* 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";

  • Add Chips into your application with the following code snippets. In the Angular CLI application, add Chips in src/app/app.component.html.

<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>

  • After the previous steps are completed, serve the application to see Angular Chips.

Action chips

We can use action chips if we want to perform some actions. The action chip will trigger an action with the user selection of the chip.

The actions of chips will be done by binding click events. These events return the text of chips, 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

Angular Chips can be designed by choosing from available options. These types of Chips allow users to select a single option from set of options.

Enable the choice chips feature by assigning 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

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 assigning 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>

Input chips

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:

  • Primary
  • Success
  • Info
  • Warning
  • Danger

Theme

Chips are viewable with different Essential JS 2 themes. Following is a list of themes available with chips.

Material material_chip
Fabric fabric_chip
Bootstrap bootstrap_chip
Highcontrast highcontrast_chip

We can customize appearance of the chips using Syncfusion theme studio application.

Other frameworks

The Angular Chips is also available in React, Vue, ASP Core and MVC frameworks that are built from their own TypeScript libraries.

Summary

In this blog, we learned how to integrate Angular Chips, different use cases of Chips, and integrating chips in an Angular CLI application.

Feel free to check out the chips sources on GitHub, the sample browser, and the documentation to explore live demos of the components and their various customization features. 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 ebook:

Angular 2 Succinctly

Tags:

Share this post:

Related Posts

Leave a comment