mgx-multi-select

MgxMultiSelect

Angular Select component that enables multi or single select with search , easy to use and it's lite

github page

Dependencies

• @angular/material (make sure you are using angular material theme )

Usage

Import MgxMultiSelectModule into your @NgModule.

import { MgxMultiSelectModule } from 'mgx-multi-select';

@NgModule({
  // ...
  imports: [
    MgxMultiSelectModule,
  ]
  // ...
})

Define Items and onFilterChange in your consuming component:

import { IMenuItem } from 'mgx-multi-select';

export class MyClass implements OnInit {
    items: IMenuItem[];

    ngOnInit() {
        this.items = [
            { id: 1, name: 'Option 1' },
            { id: 2, name: 'Option 2' },
            { id: 3, name: 'Option 3' },
            { id: 4, name: 'Option 4' },
        ];
    }

    filterChange({ value }: any) {
        console.log(value);
    }
}

In your template, use the component directive:

 <mgx-multi-select-menu
    [items]="items"
    caption="Test"
    (filterChange)="filterChange($event)"
  ></mgx-multi-select-menu>

Up and running with Grouped Items

import { IMenuItem } from 'mgx-multi-select';

export class MyClass implements OnInit {
    items: IMenuItem[] = [
    {
      id: '1',
      name: 'Option 1',
      subItems: [
        { id: '1.1', name: 'Option 1.1' },
        { id: '1.2', name: 'Option 1.2' },
        { id: '1.3', name: 'Option 1.3' },
        { id: '1.4', name: 'Option 1.4' },
      ],
    },
    {
      id: '2',
      name: 'Option 2',
      subItems: [
        { id: '2.1', name: 'Option 2.1' },
        { id: '2.2', name: 'Option 2.2' },
        { id: '2.3', name: 'Option 2.3' },
        { id: '2.4', name: 'Option 2.4' },
      ],
    },
    {
      id: '3',
      name: 'Option 3',
      subItems: [
        { id: '3.1', name: 'Option 3.1' },
        { id: '3.2', name: 'Option 3.2' },
        { id: '3.3', name: 'Option 3.3' },
        { id: '3.4', name: 'Option 3.4' },
      ],
    },
    {
      id: '4',
      name: 'Option 4',
      subItems: [
        { id: '4.1', name: 'Option 4.1' },
        { id: '4.2', name: 'Option 4.2' },
        { id: '4.3', name: 'Option 4.3' },
        { id: '4.4', name: 'Option 4.4' },
      ],
    },
  ];

    ngOnInit() {}

    filterChange({ value }: any) {
        console.log(value);
    }
}

In your template, use the component directive:

  <mgx-multi-select-menu
        [items]="items"
        caption="Standards"
        [showSelectAll]="isTrue"
        [isGrouped]="isTrue"
        (filterChange)="filterChange($event)"
      >
      </mgx-multi-select-menu>

Customize Item display

  <mgx-multi-select-menu
        [items]="items"
        caption="Standards"
        [showSelectAll]="isTrue"
        [isGrouped]="isTrue"
        (filterChange)="filterChange($event)"
      >
        <ng-template #optionTemplate let-item>
          <div fxLayout="row" fxFlexAlign="start end" class="u-width-100">
          <!-- Here you can customize displayed items -->
            {{item.id}} - {{ item.name }}
          </div>
        </ng-template>
      </mgx-multi-select-menu>

Settings

Input	Description	Default Value
caption	Placeholder for the dropdown	""
items	Array of {id:string,name:string} that defines options	[]
filtereditems	array of filteredIds string ids	[]
capitalize	controls text-transformation in case you want to capitalize options	false
showLabels	Controls if you want to show selected items on a chipList input	false
isSearchable	Control search input visibility	true
isGrouped	Display grouped items	false
isMultipleSelect	Control selection To set the dropdown for single item selection only or multiple selection.	true
disabled	Disable the dropdown	false
showSelectAll	A 'select all' checkbox to select all filtered results	false
filterChange	EventEmitter that listen to value changes	--

Keywords

angular 2 dropdown multi select angular 2 multiselect dropdown search multiselect dropdown