CODEWITHSUNDEEP
angular
GeekWithGlasses
GeekWithGlasses

Reputation: 592

angular2-dropdown not updating

I am tying to build a dropdown in angular2 which will reset the dropdown value to a default value whenever the user chooses an item. This is the code I am using so far:

//My Components.ts

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
selector: 'awesome-component',
template: `
<select [(ngModel)]="selectedModule" (ngModelChange)="onChange($event)">
 <option *ngFor="let module of modules" [value]="module._id">
{{module.moduleName}}</option>
</select>
`
})
export class AwesomeComponent implements OnInit {

modules: any[];
selectedModule: any = null;

ngOnInit(){
this.loadModules();
}

  loadModules(){
  this.modules = [];
  this.modules.push({moduleName:'Default Value',_id:1});
  this.modules.push({moduleName:'2017',_id:2});
  this.modules.push({moduleName:'2018',_id:3});
  this.modules.push({moduleName:'2019',_id:4});

  this.selectedModule = 1;
  }
  onChange(modules) {
  alert("Current id is:" + this.selectedModule+ "  Value reset to default");
 this.selectedModule = 1;
 }
}

Here is a working Plunker which demonstrates the issue.

Th goal is whenever the alert box is closed I want to update the dropdown to the default value.

Upvotes: 2

Views: 960

Answers (1)

Pengyy
Pengyy

Reputation: 38161

This is a little tricky but you can use setTimeout to let angular rerender the view.

see the working plunker.

Upvotes: 2

Related Questions