Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
The ChipList control has the following types.
Input Chip holds information in compact form. It converts user input into chips.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
// specifies the template string for the Chip component
template: `
<ejs-chiplist id="chip">
<e-chips>
<e-chip text="Andrew"></e-chip>
<e-chip text="Janet"></e-chip>
<e-chip text="Laura"></e-chip>
<e-chip text="Margaret"></e-chip>
</e-chips>
</ejs-chiplist>`
})
export class AppComponent {
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChipListModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ChipListModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size:16px;
top: 45%;
left: 45%;
}Choice Chip allows you to select a single chip from the set of ChipList/ChipCollection. It can be enabled by setting the selection property to Single.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
// specifies the template string for the Chip component
template: `
<ejs-chiplist id="chip" selection="Single">
<e-chips>
<e-chip text="Small"></e-chip>
<e-chip text="Medium"></e-chip>
<e-chip text="Large"></e-chip>
<e-chip text="Extra Large"></e-chip>
</e-chips>
</ejs-chiplist>`
})
export class AppComponent {
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChipListModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ChipListModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size:16px;
top: 45%;
left: 45%;
}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.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
// specifies the template string for the Chip component
template: `
<ejs-chiplist id="chip" selection="Multiple">
<e-chips>
<e-chip text="Chai"></e-chip>
<e-chip text="Chang"></e-chip>
<e-chip text="Aniseed Syrup"></e-chip>
<e-chip text="Ikura"></e-chip>
</e-chips>
</ejs-chiplist>`
})
export class AppComponent {
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChipListModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ChipListModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size:16px;
top: 45%;
left: 45%;
}The Action Chip triggers the event like click or delete, which helps doing action based on the event.
import { Component, OnInit } from '@angular/core';
import { ClickEventArgs } from '@syncfusion/ej2-buttons';
@Component({
selector: 'my-app',
// specifies the template string for the Chip component
template: `
<ejs-chiplist id="chip" (click)="chipclick($event)">
<e-chips>
<e-chip text="Send a text"></e-chip>
<e-chip text="Set a remainder"></e-chip>
<e-chip text="Read my emails"></e-chip>
<e-chip text="Set alarm"></e-chip>
</e-chips>
</ejs-chiplist>
`
})
export class AppComponent {
constructor() {}
chipclick(e: ClickEventArgs) {
if(e.text){
alert("you have clicked " + e.text);
}
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChipListModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ChipListModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size:16px;
top: 45%;
left: 45%;
}Deletable Chip allows you to delete a chip from ChipList/ChipCollection. It can be enabled by setting the enableDelete property to true.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
// specifies the template string for the Chip component
template: `
<ejs-chiplist id="chip" enableDelete="true">
<e-chips>
<e-chip text="Send a text"></e-chip>
<e-chip text="Set a remainder"></e-chip>
<e-chip text="Read my emails"></e-chip>
<e-chip text="Set alarm"></e-chip>
</e-chips>
</ejs-chiplist>
`
})
export class AppComponent {
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChipListModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ChipListModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size:16px;
top: 45%;
left: 45%;
}