How to give a default value in select dropdown box in angular?

Question

I have a menu page & I have few options. When I click any option, the page should redirect to a login page. Where in the login page, I have a select drop down which contains 4 options. Based on the menu selection, I need to display option which should be the default selected. That is if I click on supplier option in the menu, I need to display supplier option selected in the login page.

 <a [routerLink]="['/login', {'params': 2}]"> Go </a>

So I'm just passing a parameter in URL & based on this I'm trying to select an option in the login page.

 <select name="role" class="form-control input-xs input-sm input-md" [(ngModel)]="role">
      <option *ngIf="{"params":"2"}" value="" disabled>Login as</option>
      <option  *ngIf="{"params":"3"}" value="1"  selected="selected" >Supplier</option>
      <option  *ngIf="{"params":"4"}" value="2"  selected="selected">Customer</option>
      <option  *ngIf="{"params":"5"}" value="3"  selected="selected">OEM</option>
    </select>

I'm not getting my expected result. Can somebody help me with this?

Make sure this.role is set to whatever the default value should be — user184994
Possible duplicate of Angular 2 Dropdown Options Default Value tl;dr: You have to bind selected to something that returns a boolean value `[selected]="isSelected(...)" — FK82

Arash Arash · Accepted Answer · 2018-08-26T07:53:55

Your question is so general but I mention a sample answer. I hope it can help you.

In select tag, if you want to set a value as default you should set selected="selected" for it but in angular, you can use it as dynamic and bind it to a variable like [selected]="something === true".

If you write something like below i.e

<select name="role" class="form-control input-xs input-sm input-md">
      <option value="" [selected]="myUrl === 'Login'">Login as</option>
      <option value="1" [selected]="myUrl === 'TSP'">TSP</option>
      <option value="2" [selected]="myUrl === 'Telemarketer'">Telemarketer</option>
      <option value="3" [selected]="myUrl === 'TRAI'">TRAI</option>
</select>

Then declare myUrl in your typescript file public myUrl: string; Now just set myUrl value to each route you would like its name to be the default.

How to give a default value in select dropdown box in angular?

2 Answers