Solution 1 :

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"

Solution 2 :

Your <option tag should be like this:

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

And your selectedTimeOption can be set to:

selectedTimeOption = '1'

Solution 3 :

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

Problem :

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' }, 
          ];
    

       

Comments

Comment posted by Pradeep

your values should be inside to select tag

Comment posted by pheonixc

which values? would be nice to understand

Comment posted by Pradeep

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

Comment posted by pheonixc

Im aware of that. Those are taken care. I’ve just left it like that is it throws some error while posting queston.

Comment posted by stackoverflow.com/a/63192748/13596406

This might help you

Comment posted by pheonixc

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?

Comment posted by pheonixc

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!

Comment posted by Henry

To display a value in the