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"
Your <option tag should be like this:
<option [value]="option.value">
And your selectedTimeOption can be set to:
selectedTimeOption = '1'
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
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' },
];
your values should be inside to select tag
which values? would be nice to understand
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
Im aware of that. Those are taken care. I’ve just left it like that is it throws some error while posting queston.
This might help you
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?
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!
To display a value in the
yes im checking the matching with one of the values in the
Can you add some sample
Edited the question. Please have a look.
Thanks for the example. selectedTimeOption automatically displays the first array element in select? is it because of angular 10?
Not because of Angular10, dropdown takes the first value as the default value