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?

Answer 1

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.

See also Stackblitz

Answer 2

If the below code order status is equal then selected same will displayed in drop down.

{{ordsts.statusName}}