A component for Angular 2+ to select categorized items.
import { CategorizedSelectComponent } from 'ngx-categorized-select';
@NgModule({
declarations: [
...
CategorizedSelectComponent,
],
...
})
export class ExampleModule { }
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CategorizedSelectComponent } from 'ngx-categorized-select';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
CategorizedSelectComponent,
],
imports: [
BrowserModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
import { Config, Category, SelectionItem } from 'ngx-categorized-select';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
config: Config = {
enableKeyBindings: true,
};
categorizedItems: Category[] = [
{
name: 'First category',
key: 'first_category',
items: [
{
name: 'First item in first category',
value: 'first_item',
description: 'Item 1',
selected: false,
},
{
name: 'Second item in first category',
value: 'second_item',
description: 'Item 2',
selected: false,
},
{
name: 'Third item in first category',
value: 'third_item',
description: 'Item 3',
selected: false,
},
],
},
{
name: 'Second category',
key: 'second_category',
items: [
{
name: 'First item in second category',
value: 'first_item',
description: 'Item 1',
selected: false,
},
{
name: 'Second item in second category',
value: 'second_item',
description: 'Item 2',
selected: false,
},
{
name: 'Third item in second category',
value: 'third_item',
description: 'Item 3',
selected: false,
},
],
}
];
applySelection (selection: SelectionItem[]): void {
console.log(selection);
}
}