Angular multi column dropdown select [closed]

Question

Is there any library with multiple column drop down select for angular?

I know there is angular-mulit-select library, this is not what I need and it shoes results in one column only. I tried to Google but did not find any library.

Answer 1

With ng-select2 you can show select with custome template.

Demo with custom template demo.

My code for show table multi column in select2

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Select2OptionData } from 'ng-select2';
import * as jQuery from 'jquery';

@Component({
  selector: 'app-job-preparing',
  templateUrl: './job-preparing.component.html',
  styleUrls: ['./job-preparing.component.css']
})
export class JobPreparingComponent implements OnInit {

  optionsSelect;
  ngOnInit(): void {
    //Get Mould list
    this.optionsSelect = {
      allowClear: true,
      width: "100%",
      templateResult: this.templateResultMoulds,
      templateSelection: this.templateSelectionMoulds

    }
    //End Get Mould

    //Get All Basic Information Like Plate List,Mould List,Powder List,...
    this.jobsService.fetchData().subscribe(result => {
      this.Mould4 = result.Moulds;
    },
      errorMessage => {
        this.isLoading = false;
        this.error = errorMessage;
      });
    //End All Basci Information
  }

  // Add Table Mould Detail To Select2 Result
  public templateResultMoulds(state: Select2OptionData) {
    console.log(state);
    return jQuery(`<table class='table table-bordered'>
      <tr>
        <td class='w-25'>${state['MOULD']}</td>
        <td class='w-25'>${state['SIZE_']}</td>
        <td class='w-25'>${state['INGOT_WEIGHT']}</td>
        <td class='w-25'>${state['NR_CASTED']}</td>
        <td class='w-25'>${state['NR_MAX_BE_CASTE']}</td>
      </tr>
    </table>`);
  }

  //Selected Value Format For Select2
  public templateSelectionMoulds  (state: Select2OptionData) {
    if (!state.id)
    return  '';

    return jQuery('<span>' + state['MOULD'] + '</span>');
  }

}

Html Code

<ng-select2
[data]="Mould4"
class="form-control"
ngModel
required
name="Mould4"
[options]="optionsSelect">

</ng-select2>