Ngx-iselect NPM

ngx-iselect

A simple and intuitive component for managing selections in lists within Angular. This component is compatible with Bootstrap.

Installation

npm i ngx-iselect.

Documentation

Inputs (Properties)

data (Array): The data to display.
mode (single | multiple)?: Determines if multiple values can be selected. The default mode is multiple.
type ( checkbox | radio) ?: Determines the type of the form check input. The default type is checkbox.
id (string): The id attribute of the objects.
label (string): The label to display.
selected (Array<string|number>) ?: If it’s in edit mode, this may have initial selected values. The default value is false.
isEdit ( boolean) ?: When isEdit is true, selected is required to check the initial selection.
useObject (boolean) ?: Determines if the returned selected values are objects or object attributes like id. The default value is false.

NB : Input values marked with ? are optional

Outputs (Properties)

Selected values

Usage

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { NgxIselectModule } from 'ngx-iselect'; // add this

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxIselectModule  // add this
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgxIselectComponent } from 'ngx-iselect';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'spring';
  @ViewChild('iselectComponent') iselectComponent!: NgxIselectComponent;
  selected_items: Array<any> = [];

  listOfObjects = [
    {
        id: 1,
        name: "Alice",
        age: 30,
        occupation: "Engineer"
    },
    {
        id: 2,
        name: "Bob",
        age: 25,
        occupation: "Designer"
    },
    {
        id: 3,
        name: "Charlie",
        age: 35,
        occupation: "Teacher"
    },
    {
        id: 4,
        name: "David",
        age: 28,
        occupation: "Developer"
    },
    {
        id: 5,
        name: "Eve",
        age: 22,
        occupation: "Student"
    }
];

constructor(){
  this.selected_items = [1,2]
}


// This will run when explicitly called (example : on button click)
showSelectedWithViewChild(){
  console.log("Showing select items with viewchild:", this.iselectComponent.selected_objects)
}

// This will run on each event
onSelectedChange(event: any){
  console.log("Showing select with event", event.selected)
}

}

NB: there are tow ways to access selected items from parents. Both can be used at same time:

onSelectedChange : to use each time selection change
ViewChild - used with template reference (example : #iselectComponent)

Example 1: Default values with onSelectedChange

 <ngx-iselect [data]="listOfObjects" [label]="'name'" [id]="'id'" (selectedChange)="onSelectedChange($event)"></ngx-iselect>

Example 2: Default values with ViewChild

When no need to perform action each time selection change

 <ngx-iselect #iselectComponent [data]="listOfObjects" [label]="'name'" [id]="'id'"></ngx-iselect>

 <button (click)="showSelectedWithViewChild()">Log selected elements</button>

Example 3

<ngx-iselect #iselectComponent [useObject]="true" [isEdit]="true" [data]="listOfObjects" [label]="'name'" [id]="'id'" [selected]="selected_items" [type]="'checkbox'" (selectedChange)="onSelectedChange($event)"></ngx-iselect>

<button (click)="showSelectedWithViewChild()">Log selected elements</button>

Example 4

<ngx-iselect #iselectComponent [useObject]="true" [isEdit]="true" [data]="listOfObjects" [label]="'name'" [id]="'id'" [selected]="selected_items" class="ngx-container" [type]="'checkbox'"></ngx-iselect>

<button (click)="showSelectedWithViewChild()">Log selected elements</button>