How can I fire select dropdown onchange event programatically?

Question

I am assigning the below datasource 'tabNameList' on page load. After it loads the select list I then assign it the default value of lets say 12. This should trigger the below code to fire however it never fires. How can I get the code to fire the second the tablist is loaded and the selectedTabId is set to 12?

The setup code

 LoadTabNames(){
    this._userProfileService.loadTabNames(this.screenId).subscribe(data => { 
      this.DisableTab= false;             
      this.tabNameList = data[0];
      this.selectedTabId = data[0]["ScreenId"]  <----- TabNameChanged event should fire right here since the ngModel has changed        
      this.cdr.detectChanges();      
    })
  }

TabNameChanged(event){
      this.selectedColumns = [];
      this.availableColumns = [];     

      // When the tab select changes load the new headers into the First ListBox
      const detailList = filterBy(this.UserProfileTabData, {
        logic: 'and',
        filters: [
          { field: 'ScreenId', operator: 'eq', value: this.screenId, ignoreCase: true },
          { field: 'TabId', operator: 'eq', value: event, ignoreCase: true }
        ]
      });
       detailList.forEach(element => {
        this.selectedColumns.push(element["ColumnName"]);        
      });

    }

My html

<div class="col">             
                  <label for="dropdown2">Tab Name</label>
                  <select #tab class="custom-select custom-select-lg mb-3" id="dropdown2" [disabled]='DisableTab' (ngModelChange)='TabNameChanged($event)' [(ngModel)]="selectedTabId">                  
                        <option *ngFor="let tab of tabNameList let i=index" [(ngValue)]="tab.TabId" >{{tab.TabName}}</option>                
                      </select>                 
       </div>

This: https://stackoverflow.com/questions/44840735/change-vs-ngmodelchange-in-angular — Diodeus - James MacFarlane, Apr 30 '19 at 18:42

score 2 · Accepted Answer · answered Apr 30 '19 at 18:50

2

You can fire an element's event at any time using the following code:

let element = document.getElementById(id);
element.dispatchEvent(new Event("change"));

answered Apr 30 '19 at 18:50

user3059487

36
5

This does work however when done this way event.target.value is " ". I need the value to be the value that I just set via code this.selectedTabId = data[0]["ScreenId"] – Terrance Jackson Apr 30 '19 at 20:34

FragEden · Answer 2 · 2019-04-30T18:47:02.830

0

You need to change from (ngModelChange)='TabNameChanged($event)' to (change)="TabNameChanged($event)" in your HTML for the dropdown.

For example:

<div class="col">             
                  <label for="dropdown2">Tab Name</label>
                  <select #tab class="custom-select custom-select-lg mb-3" id="dropdown2" [disabled]='DisableTab' (change)='TabNameChanged($event)' [(ngModel)]="selectedTabId">                  
                        <option *ngFor="let tab of tabNameList let i=index" [(ngValue)]="tab.TabId" >{{tab.TabName}}</option>                
                  </select>                 
</div>

edited Apr 30 '19 at 18:47

answered Apr 30 '19 at 18:41

FragEden

43
1
6

This doesn't fire for me. Also if I manually select from the dropdownlist the event.target.value looks like this '12: 12'. When it should just be 12 – Terrance Jackson Apr 30 '19 at 20:36

How can I fire select dropdown onchange event programatically?

2 Answers2