Dropdowns onChange

Question

I've been reading and found that there are lots of variations to this question, but I have not yet found one that worked. This is my HTML:

<select [ngModel]="selectedDepartment" (ngModelChange)="onChange($event)">
   <option *ngFor="let department of Directory.categories" [ngValue]="department.id">{{department.option}}</option>
</select>

My department.option list includes: 'All Departments', 'Department One', and 'Department Two'. Right now, the dropdown starts with a blank selection, and you can only see the options if you click the dropdown arrow. So, the dropdown really acts like: blank, 'All Departments', 'Department One', etc. I want it to use 'All Departments' as a default. I've tried just about every solution I've found here, but have yet to figure out something that actually works. Although this question is very similar to mine, none of the solutions on that page worked for my project.

UPDATE: (the solution)

<select [ngModel]="selectedDepartment" (ngModelChange)="onChange($event)">
    <option *ngFor="let department of Directory.categories" [ngValue]="department">{{department.option}}</option>
</select>

ngOnInit() {
    this.selectedDepartment = this.Directory.categories[0];
}

BUT Now, my onChange($event) is passing an object to the onChange function, so my pipe filter isn't working correctly. This was fixed by using [ngValue]="department.id" and this.Directory.categories[0].id;

Possible duplicate of [Angular 2 Dropdown Options Default Value](https://stackoverflow.com/questions/35978450/angular-2-dropdown-options-default-value) — anoop, May 24 '17 at 13:16
You can just do in your component: `this.selectedDepartment = this.Directory.categories[0];` — devqon, May 24 '17 at 13:25
Yup, like @devqon said. also you need to remove `.id` from your `ngValue`. I assume you want to bind the whole object? Then use `[ngValue]="department"` and `this.selectedDepartment = this.Directory.categories[0];` If not, then use `[value]="department.id"` and then you need to set `this.selectedDepartment = this.Directory.categories[0].id`, demo with `ngValue`: http://plnkr.co/edit/iEf4SwO1RG0Jp3Jylhr0?p=preview — AT82, May 24 '17 at 13:31
@AJT_82 thank you!!! I got it working using **[ngValue] = "department"** and then following your plnkr link to figure out where to put the **this** statement. — a_lovelace, May 24 '17 at 13:37
Yes look at the comment, you perhaps only want to use value? Here it passes just the id: http://plnkr.co/edit/XAcYHBamriWo0brqh12Z?p=preview — AT82, May 24 '17 at 13:48
@a_lovelace I see you updated, if you just want to pass a primitive type, in this case a number, use just `[value]="department.id"`. it will work with `[ngValue]`, as you noticed, but that is actually meant to bind an object. Just a detail ;) Have a gooood day and happy coding! :) — AT82, May 24 '17 at 13:58

score 2 · Accepted Answer · answered May 24 '17 at 13:40

2

If you have two-way data binding like [(ngModel)]="selectedDepartment", you can also set this in the component ts file

selectedDepartment = 1;

and it will default to that value

answered May 24 '17 at 13:40

Ana

150
2
8

score 1 · Answer 2 · 2017-05-24T13:33:26.957

1

Try this

<select [ngModel]="selectedDepartment" (ngModelChange)="onChange($event)">
   <option *ngFor="let department of Directory.categories; let i = index" [ngValue]="department.id" [selected]="i === 0 ? 'true' : 'false'">{{department.option}}</option>
</select>

Basically, you say that if it's the first option, you set its property to selected.

edited May 24 '17 at 13:33

answered May 24 '17 at 13:16

Your solution makes sense and in theory should work beautifully, but it's still leaving the pre-set value of the dropdown blank... – a_lovelace May 24 '17 at 13:29
1

Then try setting your `selectedDepartment` to `Directory.categories[0].id` in your `ngOnInit()` – May 24 '17 at 13:36

score 0 · Answer 3 · answered May 24 '17 at 13:44

I have included the dropdown with values

  On your ts file 
  
      directory:any; 
    this.Directory = [{option: '--sel--', value: 0}];

<select class="selectedDepartment"[(ngModel)]="electrify" (ngModelChange)="electrifyonChange($event)">
               <option *ngFor="let let department of Directory.categories" [ngvalue]="department.id">{{department.option}} </option>
          </select>

Dropdowns onChange

3 Answers3