Dynamically update datasoruce of single and multiselect reactive dropdown

[Raj Maheshwari]

Hi Team

can you please help me update reactive multiselectdropdown and reactive singledropdownlist

datasource dynamically

 https://stackblitz.com/edit/angular-dgmvpt?file=app.component.ts

updateDatasource(event) {

debugger;

const newSkills: string[] = [

'skill1', 'skill2'

];

const skillName = this.skillForm.get("skillname");

// skillName.updateDatasource(newSkills);

}

Also i would like to add - we are using this within nested ngFor loops and even though its not impossible bit it is highly complex to use 'local references' as there is inherent complexity in our requirements.

Mohit

[Vinitha Jeyakumar]

Hi Mohit,

We can achieve your requirement of updating data source dynamically to the Multiselect and single dropdown list using the dataSource property. please check the code below,

In the below sample, we have dynamically updated the dataSource on a button click

Code snippet:

app.component.html

<div id="multiselect-sample" class="control-section" style="height: 500px">

  <div id="content">

    <div class="control-styles">

      <h4>Default Mode</h4>

      <ejs-multiselect

        id="sample-list1"

        [dataSource]="sportsData"

        [mode]="default"

        [fields]="fields"

        [placeholder]="waterMark"

      ></ejs-multiselect>

      <button (click)="onBegin()">Update Data</button>

    </div>

    <div class="col-lg-9 content-wrapper" style="height: 350px">

      <div style="margin: 0px auto; width:250px; padding-top: 40px;">

        <ejs-dropdownlist

          id="games"

          #sample

          [dataSource]="sportsData"

          (change)="onChange($event)"

          [value]="value"

          [fields]="fields"

          [placeholder]="waterMark"

          [popupHeight]="height"

        ></ejs-dropdownlist>

      </div>

    </div>

  </div>

</div>

app.component.ts

 public sportsData: Object[] = [

    { Id: 'Game1', Game: 'American Football' },

    { Id: 'Game2', Game: 'Badminton' },

  ];

  // maps the appropriate column to fields property

  public fields: Object = { text: 'Game', value: 'Id' };

  public onBegin(e: any) {

    this.sportsData = [

      { Id: 'Game1', Game: 'American Football' },

      { Id: 'Game2', Game: 'Badminton' },

      { Id: 'Game3', Game: 'Basketball' },

      { Id: 'Game4', Game: 'Cricket' },

      { Id: 'Game5', Game: 'Football' },

      { Id: 'Game6', Game: 'Golf' },

      { Id: 'Game7', Game: 'Hockey' },

      { Id: 'Game8', Game: 'Rugby' },

      { Id: 'Game9', Game: 'Snooker' },

      { Id: 'Game10', Game: 'Tennis' },

    ];

  }

Sample: https://stackblitz.com/edit/angular-qo8gqb?file=app.component.html

Angular (forked) - StackBlitz stackblitz.com





Regards,

Vinitha