Estoy intentando actualizar la opción que se muestra en pantalla por el <select>
. Básicamente se tienen 5 opciones, y la tercera es la que se muestra en pantalla por defecto al cargar la aplicación web. Lo que deseo hacer es que cuando el usuario presione determinado botón se actualice instantáneamente la opción correspondiente en el <select>
.
A continuación muestro una versión simplificada de lo que estoy haciendo. El código HTML
del componente es:
<div id="container">
<select name="options"
id="options"
(change)="opChanged($event.target.value)">
<option value="option1">option 1</option>
<option value="option2">option 2</option>
<option value="option3" selected="true">option 3</option>
<option value="option4">option 4</option>
<option value="option5">option 5</option>
</select>
<br/>
<button value="option B1"
(click)="optionChanged($event.target.value)">Option 1</button>
<br/>
<button value="option B2"
(click)="optionChanged($event.target.value)">Option 2</button>
<br/>
<button value="option B3"
(click)="optionChanged($event.target.value)">Option 3</button>
<br/>
<button value="option B4"
(click)="optionChanged($event.target.value)">Option 4</button>
<br/>
<button value="option B5"
(click)="optionChanged($event.target.value)">Option 5</button>
</div>
El código Typescript
del componente es el siguiente:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
opChanged(selectedValue: string){
console.log(selectedValue);
}
optionChanged(selectedValue: string){
console.log(selectedValue);
}
}
En resumen, cuando se presiona el botón "option B1" en el select se debe ver option 1, cuando se presiona el botón "option B2" en el select se debe ver option 2 ...
Dejo el enlace de StackBlitz por si quieren verlo desde ahí: enlace StackBlitz
Muchas gracias.