How to get started easily with Syncfusion Angular 7 Chips?
|
|
|
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 7 project with minimal code.
Prerequisites
Before starting, the following tools and SDK needs to be installed in your machine to Angular 7 application:
Installation and application creation
You can install Angular CLI 7 using the following command.
npm install -g @angular/[email protected] |
To follow and run the application in Angular 6 or earlier version, you can replace the CLI command version with your preferred version and install it. |
npm install -g @angular/cli@<CLI VERSION> |
Create an Angular 7 application
ng new chips-angular7 cd chips-angular7 |
Installing EJ2 Chips
npm install @syncfusion/ej2-angular-buttons |
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 7 version.
Adding Angular 7 Chips
You can add the Angular 7 Chips component by using `ejs-chiplist` tag and the attributes used within this tag allows you to define other Chips functionalities.
- 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 { }
|
- 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'; |
- 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>
|
- Run the application with the following command and you should the see the below represented output of the EJ2 Angular Chips component.
ng serve --open |
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.
Summary
You can learn more about the Angular 7 Chips from the below links.
GitHub repository of the code used in this article can be found here.
Checkout Angular 7 Chips features here.
Checkout Angular 7 Chips documentation here.
Checkout Angular 7 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!
Conclusion
I hope you enjoyed learning about how to get started easily with Syncfusion Angular 7 Chips.
You can refer to our Angular Chips feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Chips example to understand how to create and manipulate data.
For current customers, you can check out our Document Processing Libraries from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-trac, or feedback portal. We are always happy to assist you!
|
|
|
