angular6ng2-smart-table

How to set multiple selection in dropdown in ng2-smart-table?


In my app, I have load dynamic values in dropdown list of ng2-smart-table. Now I have to enable multiple selection in dropdown in ng2-smart-table.

Note: Multiple selection in dropdown not for checkbox.


Solution

  • I think you can try with your own custom editor component. I've added a basic select with a multiple attribute, but you can create a custom component more complex as you prefer.

    Pass data to your component with valuePrepareFunction and voila.

    settings.ts

    private settings = {
     // Previous config ...
    
     columns: {
      multiple: {
        title: 'Multi select',
        type: 'html',
         editor: {
          type: 'custom',
          valuePrepareFunction: (cell, row) => row,
          component: MultiSelComponent,
         },
      }
     }
    }
    

    multiSel.component.html

    <select multiple [(ngModel)]="yourModelStore">
      <option *ngFor="let item of myValues" [value]="item.value">{{item.name}}</option>
    </select>
    

    multiSel.component.ts

    import { Component, Input, OnInit } from '@angular/core';
    import { ViewCell } from 'ng2-smart-table';
    
    ....
    
    export class MultiSelComponent implements OnInit {
    
      @Input() value;
    
      yourModelStore: any; // rendered as this.yourModelStore = ['value', 'value'];
    
      ngOnInit() {
        this.myValues = this.value;
      }
    

    module.ts

    declarations:[
      //others ...
    
      MultiSelComponent
    ]
    entryComponents: [
      MultiSelComponent
    ]
    

    **I've edit the answer and added more infos on setting and component.ts