How to set default first item in drop down list - angular 2

Question

My drop-down contains a list of action ids and names of operations as shown below.

{ id: 0, name: 'Select Operation' },
{ id: 1, name: 'Operation 1' },
{ id: 2, name: 'Operation 2' },
{ id: 3, name: 'Operation 3' },
{ id: 4, name: 'Operation 4' }

Initially, a user can see 'Select Operation' option in the web application.

After selecting an operation from the drop-down list according to the operation that opens the respective operating model window, and after closing that window, the user should see "Select operation", not the previously selected operation element. Basically I'm new to Angular and not getting any idea how to achieve this. If any idea please help me to achieve this.

This is my html:

<div class="bx--row">
    <div class="bx--col-md-3"></div>

    <div class="bx--col-md-1">
        <select id="select-menu" class="bx--text-input" required name="actionSelection" (change)="onActionChange($event)"
            (dblclick)="onActionChange($event)">
            <option *ngFor="let action of actions" [value]="action.id">{{action.name}}</option>
        </select>

        <carbon-modal [modalId]="modalid" [modalTitle]="modaltitle" [isFull]="isFull">
            <div modal-body>
                <div *ngIf="Operation1">
                    <Operation1></Operation1>
                </div>
                <div *ngIf="Operation2">
                    <Operation2></Operation2>
                </div>
                <div *ngIf="Operation3">
                    <Operation3></Operation3>
                </div>
                <div *ngIf="Operation4">
                    <Operation4></Operation4>
                </div>
            </div>
        </carbon-modal>
    </div>
</div>

Use ngModel to archive this.

Shashikant Devani
– Shashikant Devani

2018-09-18 06:09:18 +00:00
Commented Sep 18, 2018 at 6:09 — Shashikant Devani
– Shashikant Devani, Commented Sep 18, 2018 at 6:09

Hrishikesh Kale · Accepted Answer · 2018-09-18 12:39:13Z

1

this can be achieved by using [(ngModel)]

ngmodel implements two-way data binding

in HTML

<select [(ngModel)]="selectedValue" (change)="onChange($event)">
  <option *ngFor="let action of actions" [ngValue]="action.id">{{action.name}}</option>
</select>

in ts

selectedValue : 0;



onchange(event){
console.log(event);
this.selectedvalue = event.value //your selcted value.
}

after opening your modal you can assign a selected value from dropdown to selectedValue variable in ts file which will allow you to see selected value in view.

edited Sep 18, 2018 at 12:39

answered Sep 18, 2018 at 4:54

Hrishikesh Kale

6,6484 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Roy Over a year ago

Thanks for your answer, I have tried this approach but not working.

Hrishikesh Kale Over a year ago

using ngModel should work. I think you should look for some simple select example in angular for better implementation.

Roy Over a year ago

I have observed one thing in this approach, first time when we select an option from drop down list while opening the model, that time selectedValue getting updated to initial stage. But If I select again one more option by that time selectedValue not getting updated. If you have any idea please look on it once.

Hrishikesh Kale Over a year ago

at the time of selecting a dropdown you can call a function on select element (change)="onChange($event)" and assign the latest value of selected id to selectedValue; so whenever you select something it will bind that value to selectedValue. i have updated my answer you can check.

Hrishikesh Kale Over a year ago

for that on closing modal function reset selectedvalue to 0 like this.selectedvalue = 0;

|

Yusuff Bisiriyu · Accepted Answer · 2018-09-18 05:46:12Z

0

Use ngModel on the select field

in template

<select id="select-menu" class="bx--text-input" required name="actionSelection" 
(change)="onActionChange($event)" [(ngModel)]="selectionValue" 
(dblclick)="onActionChange($event)">             
 <option  *ngFor="let action of actions"  [value]="action.id">{{action.name}}</option>
 </select>

In .ts file

onActionChange($event) {
 // alert($event.target.value);
    // your previous code
       this.selectionValue = 0;  //this will set the select field value to the default
   }

Note: selectedValue must have been declared as a component variable

edited Sep 18, 2018 at 5:46

answered Sep 18, 2018 at 5:23

Yusuff Bisiriyu

611 silver badge5 bronze badges

6 Comments

Roy Over a year ago

Perfect, Thank you soo much. But Initially it should show "Select Operation" now it is not coming.

Yusuff Bisiriyu Over a year ago

set selectedValue to 0 when declaring it. so the defult is "Select Operation"

Roy Over a year ago

Yeah sure, But if I declare selectedValue=0 initially, After closing the model also it is not effecting.

Roy Over a year ago

Which you specified that approach effecting only first attempt i.e If i select Operation1 first time selectdValue get updating and If I select again Operation1 once again that selectedValue not getting updated. If you have any idea please look on it once.

Yusuff Bisiriyu Over a year ago

Can you recreate this issue on stackblitz so I look into it properly

|

Krishna Rathore · Accepted Answer · 2018-09-18 09:08:31Z

0

use [(ngModel)]="selectedOption" for two way binding and display operationwhen condition match *ngIf="selectedOption==1"

Stackblitz

<div class="bx--col-md-1">
     <select id="select-menu" [(ngModel)]="selectedOption" class="bx--text-input" required name="actionSelection" (change)="onActionChange($event)" (dblclick)="onActionChange($event)">             
         <option  *ngFor="let action of actions"  [value]="action.id">{{action.name}}</option>
     </select>  

    <carbon-modal [modalId]= "modalid" [modalTitle]= "modaltitle" [isFull]="isFull" >
    <div modal-body>
    <div *ngIf="selectedOption==1">
        <Operation1></Operation1>   
    </div>
    <div *ngIf="selectedOption==2">
        <Operation2></Operation2>   
    </div>
    <div *ngIf="selectedOption==3">
        <Operation3></Operation3>       
    </div>
    <div *ngIf="selectedOption==4">
        <Operation4></Operation4>   
    </div>
  </div>

ts file

selectedOption=0;

edited Sep 18, 2018 at 9:08

answered Sep 18, 2018 at 5:01

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

3 Comments

Roy Over a year ago

Thanks for your answer, I have tried this approach but not working.

Krishna Rathore Over a year ago

check Stackblitz demo - stackblitz.com/edit/…

Roy Over a year ago

Normal drop down list selecting items and all working fine for me.But which I am expecting is, In my drop down list each operation contains different model is their, so when I select a operation that particular model window will open. After when we close that window my drop down list should show "Select operation" item, not current selected item.

Collectives™ on Stack Overflow

How to set default first item in drop down list - angular 2

3 Answers 3

7 Comments

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related