1

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?

viki
  • 361
  • 2
  • 7
  • 17
  • Make sure `this.role` is set to whatever the default value should be – user184994 Aug 26 '18 at 07:33
  • Possible duplicate of [Angular 2 Dropdown Options Default Value](https://stackoverflow.com/questions/35978450/angular-2-dropdown-options-default-value) **tl;dr:** You have to bind selected to something that returns a boolean value `[selected]="isSelected(...)" – FK82 Aug 26 '18 at 07:34

2 Answers2

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

Arash
  • 1,692
  • 5
  • 21
  • 36
  • Im getting this error. "Unexpected closing tag "option". It may happen when the tag has already been closed by another tag." @Arash – viki Aug 26 '18 at 08:43
  • Have a look at Stackblitz which I mentioned in the answer. it has no error. – Arash Aug 26 '18 at 09:00
  • Supplier This is what Im trying to to, but keeps showing me parsing error. Can you pls tell me what I doing wrong? @Arash – viki Aug 26 '18 at 09:54
  • [selected]= {{ paramss }} === '2' should be [selected]= "paramss === '2' " – Arash Aug 26 '18 at 09:58
  • Thank you. Error gone but no value from drop down is selected by default. – viki Aug 26 '18 at 10:04
  • 1
    Have a look at [This](https://stackblitz.com/edit/angular-rbd7a7?file=src/app/app.component.html) – Arash Aug 26 '18 at 10:07
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/178791/discussion-between-arash-and-viki). – Arash Aug 26 '18 at 10:19
-1

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

{{ordsts.statusName}}
chenna
  • 21
  • 1