locked
Multi Column and Multi Select DropDown in Angular 2 or greater RRS feed

  • Question

  • User858695729 posted

    Hi All, 

    I need your help or suggestion to built a drop down control which should have multi select capability and also have multi column using angular js framework 

    Please Help

    inguva

    Friday, May 31, 2019 6:49 PM

Answers

  • User61956409 posted

    Hi inguva,

    inguva.vamsi

    built a drop down control which should have multi select capability and also have multi column using angular js framework 

    You can try to use [MatSelect](https://material.angular.io/components/select/api), like below.

    app.component.ts

    import { Component } from '@angular/core';
    import { FormControl } from '@angular/forms';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'dorp-down-multiselect';
      toppings = new FormControl();
    
      dropdownList = [
        { item_id: 1, item_text: 'Extra cheese' },
        { item_id: 2, item_text: 'Mushroom' },
        { item_id: 3, item_text: 'Onion' },
        { item_id: 4, item_text: 'Pepperoni' },
        { item_id: 5, item_text: 'Sausage' },
        {item_id: 6, item_text: 'Tomato'}
      ];
    
    }
    

    app.component.html

    <mat-form-field>
      <mat-label>Toppings</mat-label>
      <mat-select [formControl]="toppings" multiple>
        <mat-option *ngFor="let topping of dropdownList" [value]="topping">{{topping.item_id}} <b>|</b> {{topping.item_text}}</mat-option>
      </mat-select>
    </mat-form-field>

    Test Result:

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 3, 2019 3:08 AM