Articles in this section
Category / Section

How to get started easily with Syncfusion Angular 11 Chips?

2 mins read

The Essential JS2 Angular Chips component is used to small block of essential information that triggers an event on click action. It contains the text, image, or both and mostly used in contacts, mails, or filter tags. This article explains how to easily get started with EJ2 Chips component in the Angular 11 project with minimal code.

Prerequisites

 

Before starting, the following tools and SDK needs to be installed in your machine to Angular 11 application:

Installation and application creation

 

  1. You can install Angular CLI 11 using the following command.

 

npm install -g @angular/cli@11.2.3

 

Note:

To follow and run the application in Angular 9 or earlier version, you can replace the CLI command version with your preferred version and install it.

 

npm install -g @angular/cli@<CLI VERSION>

 

 

  1. Create an Angular 11 application

 

ng new angular11-app

cd angular11-app

 

  1. Installing EJ2 Chips

 

npm install @syncfusion/ej2-angular-buttons

 

  1. Serve the application

 

ng serve --open

 

Your application will open in a browser in the http://localhost:4200. Refer to the following example screenshot for Angular 11 version.

 

Angular-app

 

Adding Angular 11 Chips

 

You can add the Angular 11 Chips component by using `ejs-chiplist` tag and the attributes used within this tag allows you to define other Chips functionalities.

  1. Import ChipListModule into app.module.ts file from the @syncfusion/ej2-angular-buttons package.

 

[app.module.ts]

 

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { ChipListModule } from '@syncfusion/ej2-angular-buttons';

 

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

ChipListModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

 

  1. Import the CSS styles of the Chips component.

 

[style.css]

 

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';

@import '../node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';

 

  1. Add the Chips component in the template file.

 

[app.component.html]

 

<ejs-chiplist>

<e-chips>

<e-chip text="Microsoft"></e-chip>

<e-chip text="Apple"></e-chip>

<e-chip text="Google"></e-chip>

</e-chips>

</ejs-chiplist>

 

  1. Run the application with the following command and you should the see the below represented output of the EJ2 Angular Chips component.

 

ng serve 

 

chips

Filter Chip

 

Filter Chip allows you to select a multiple chip from the set of ChipList/ChipCollection. It can be enabled by setting the selection property to Multiple.

[app.component.html]

<ejs-chiplist selection="Multiple">

<e-chips>

<e-chip text="Microsoft"></e-chip>

<e-chip text="Apple"></e-chip>

<e-chip text="Google"></e-chip>

</e-chips>

</ejs-chiplist>

 

After mapping the properties, you should see the Chips when you run the application as below.

Chips-filter

 

Summary

 

You can learn more about the Angular 11 Chips from the below links.

Checkout Angular 11 Chips features here.

Checkout Angular 11 Chips documentation here.

Checkout Angular 11 Chips API here.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied