How to make one option preselect in ng-select using angular2

Question

I had add popup field, when the popup opens i want to get one field to be preselected with its option, i am getting the required value in console but its not reflecting on html. Can anyone help me to solve this issue.

HTML:

<div class="form-group">
  <label class="showlabel">Role</label>
   {{selectedRole}}
  <ng-select [options]="roles" [(ngModel)]="user.user.role_id" name="AddRole" class='filterDropDown cat' placeholder="Role" notFoundMsg="No Role Found" required> 
  </ng-select>
</div>

TS: To open popup

addCompany (){ 
  this.user = new Users(); 
  this.addCompanies.show();
  let userData = this.roles.filter(role => role.label === 'appUser');
  if(userData && userData[0]) { 
    this.selectedRole = userData[0].label.toString();
  }
  console.log(this.selectedRole);
}

You can set the value of [(ngModel)]="user.user.role_id" in ngOnInit event — Arun, Mar 15 '18 at 06:03
@Arun: can you please tell how? You mean this.user.user.role_id = "appuser" in ngOninit? i tried but didnt work — Bhrungarajni, Mar 15 '18 at 06:04
@Aravind I am not getting how to create plunker with modal popup's. so is it possible to guide me with codes, i will give you inputs how u ask — Bhrungarajni, Mar 15 '18 at 06:23
Please use the modal from this [**answer**](https://stackoverflow.com/questions/42735858/how-to-implement-modal-dialog-in-angular-2-and-above/42736058#42736058) — Aravind, Mar 15 '18 at 06:25
@Aravind this is plunker link: http://plnkr.co/edit/sl9nPssqqRgENDRwe8xr?p=preview facing some error il try to solve that in plunker — Bhrungarajni, Mar 15 '18 at 06:58
ya, some error is coming, trying to solve. will update you soon — Bhrungarajni, Mar 15 '18 at 07:12
i am using "angular2-select": "^1.0.0-beta.3", so its not installing in stackblitz.. but will try and give you updated one — Bhrungarajni, Mar 15 '18 at 07:20
i am getting this error Can't find modules: angular2-select/dist/select.component.css (@1.0.0-beta.3) angular2-select/dist/select.component.html (@1.0.0-beta.3) angular2-select/dist/select-dropdown.component.css (@1.0.0-beta.3) angular2-select/dist/select-dropdown.component.html (@1.0.0-beta.3) — Bhrungarajni, Mar 15 '18 at 07:36

score 1 · Answer 1 · answered Mar 15 '18 at 06:08

1

class MyComponent implements OnInit {
  ngOnInit() {
    // set the value of dropdown which u want to select
  }
}

when your component load it it will run both ngOninit and constructor so you can set the preselect value any one place.

if you want with example i need data.

answered Mar 15 '18 at 06:08

Arun

450
3
8

ya same way i did but didnt work.. ya i will create plunker – Bhrungarajni Mar 15 '18 at 06:11
no it didnt because i am getting roles from backend – Bhrungarajni Mar 15 '18 at 06:58

How to make one option preselect in ng-select using angular2

1 Answers1