Angular dropdown select - how to set default value from typescript

Question

How to set default value in Select?

I am trying to create time- dropdown select with multiple options. At present. the selectedTimeOption correctly identifies if we choose an option from dropdown, but can't detect a value that I am trying to display initially from the Typescript.

I want to first display a predefined value in select box even before selection (it basically comes from another page)

How do I implement it?

Is there a problem with TS component or the html? If someone can explain with small working example on stackblitz.com , that would be helpful.

HTML:
        <select 
        
            [value]="selectedTimeOption"       
            (valueChange)="setTime($event)"
        >

        <option 
              "let option of timeOfOptions"
              [value]="option"
           >
                    {{ option.label }}
                
        </option>
        </select>
   
TS:
          timeOptions:TimeItems[] =[ 
          { label: '0:00', value: '0' }, 
          { label: '1:00', value: '1' }, 
          { label: '2:00', value: '2' }, 
          ];

you have to modify your question. you should n't be using option as variable name inside option tag and you should use *ngFor to iterate over array — Pradeep, Jul 20 '20 at 02:00
Im aware of that. Those are taken care. I've just left it like that is it throws some error while posting queston. — pheonixc, Jul 20 '20 at 02:13
This might help you https://stackoverflow.com/a/63192748/13596406 — Pallavi, Jul 31 '20 at 14:01

Henry · Answer 1 · 2020-07-20T01:54:08.417

0

Your <option tag should be like this:

<option [value]="option.value">

And your selectedTimeOption can be set to:

selectedTimeOption = '1'

edited Jul 20 '20 at 01:54

answered Jul 20 '20 at 01:06

Henry

631
10
21

Thanks for the reply. I have edited the question, I am trying to display a value in the select and not the dropdown options. Hope I have conveyed it correctly now! – pheonixc Jul 20 '20 at 01:11
To display a value in the – Henry Jul 20 '20 at 01:18
yes im checking the matching with one of the values in the – pheonixc Jul 20 '20 at 01:23
Can you add some sample tag and its values in your question? – Henry Jul 20 '20 at 01:27
Edited the question. Please have a look. – pheonixc Jul 20 '20 at 01:45
tried it. still the same. i dont have a problem with the options. Its just that the select recognizing the first value Im trying to display. ive currently initialized selectedTimeOption: selectedTimeOption = this.timeOptions[0]; – pheonixc Jul 20 '20 at 02:22

score 0 · Answer 2 · answered Jul 20 '20 at 01:38

0

You can have a look at he stackblitz example here,

Where, you can initialize the value to be displayed first(as you said from another component) in the example it is shown as,

firstSelectValue = 'one';

and then in your template, in your element, you can have a 'getter', in the given example, it is,

*ngFor="let opt of firstSelectOptions"

answered Jul 20 '20 at 01:38

Santa

367
2
8

Appreciate providing the example. Thats great. I have edited the question with more details. I have the firstSelectValue initial value to be displayed coming from another component. Would be great if you could explain how that can be implemented in the example component? – pheonixc Jul 20 '20 at 01:54

score 0 · Answer 3 · answered Jul 20 '20 at 02:07

0

There are syntax issue and coding conventions you need to follow. please rename those option variable while iterating over array, something like below.

ex: *ngFor = "let time of timeSource"

Here is the stackblitz example

answered Jul 20 '20 at 02:07

Pradeep

1,192
2
12
30

Thanks for the example. selectedTimeOption automatically displays the first array element in select? is it because of angular 10? – pheonixc Jul 20 '20 at 02:17
Not because of Angular10, dropdown takes the first value as the default value – Pradeep Jul 20 '20 at 13:48

Angular dropdown select - how to set default value from typescript

3 Answers3