1

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.

1 respuesta 1

1

Puedes usar una template variable (#) que lo que utiliza Angular para nombrar los elementos y cambiar directamente el valor seleccionado del <select>.

En tu caso deberias añadir #options al selector y como funcion en los botones:

options.value=$event.target.value.replace(' B','') 

He añadido un replace para que coincidan los valores del los botones con los de las opciones del selector (si fueran iguales no haria falta).

Tu codigo quedaria asi:

<select name="options" 
                id="options" #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)="options.value=$event.target.value.replace(' B','')">Option 1</button>
<br/>
<button value="option B2" (click)="options.value=$event.target.value.replace(' B','')">Option 2</button>
<br/>
<button value="option B3" (click)="options.value=$event.target.value.replace(' B','')">Option 3</button>
<br/>
<button value="option B4" (click)="options.value=$event.target.value.replace(' B','')">Option 4</button>
<br/>
<button value="option B5" (click)="options.value=$event.target.value.replace(' B','')">Option 5</button>

Espero que te sirva, saludos.

1
  • Muchas gracias, me funciona de maravilla. Saludos.
    – Lucas
    Commented el 13 sept. 2019 a las 19:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.