En mi aplicación angular, tengo una lista desplegable y, debajo, algunos datos están en div.
componente.html
<select class="form-control" id="power" required> <option value="" disabled selected>Select a category</option> <option *ngFor="let category of categoryNames">{{ category }}</option> </select> <!--below code I have to show or hide--> <div class="row"> <div class="col-sm-8"> <p>Slect Habits</p> <h5 class="formxp">Slect Items</h5> </div> <div class="col-sm-4"> <p>Slect Habits</p> <h5 class="formxp">Slect Items</h5> </div> </div>Entonces, mi requisito es cuando hago clic en cualquiera de los elementos de la lista desplegable, tengo que mostrar el div (después del menú desplegable en el código anterior)
¿Alguien puede ayudarme con respecto a lo mismo?
Puede definir una variable de plantilla (por ejemplo, #mySelect) en el elemento <select> y luego usarla para determinar el valor seleccionado: mySelect.value .
En caso de que necesite mostrar el div si la categoría seleccionada es igual a 'Hábito', puede intentar lo siguiente:
<!-- #mySelect is declared on <select> element --> <select class="form-control" id="power" required #mySelect> <option value="" disabled selected>Select a category</option> <option *ngFor="let category of categoryNames">{{ category }}</option> </select> <div class="row" *ngIf="mySelect.value === 'Habits'"> <div class="col-sm-8"> <p>Slect Habits</p> <h5 class="formxp">Slect Items</h5> </div> <div class="col-sm-4"> <p>Slect Habits</p> <h5 class="formxp">Slect Items</h5> </div> </div>Puede leer más sobre la variable de plantilla angular aquí: https://angular.io/guide/template-reference-variables