Solución básica
Tu problema se puede solucionar haciendo las siguientes modificaciones en app.module.ts
:
- Agregar
import { FormsModule } from "@angular/forms";
.
- Agregar
FormsModule
a imports
.
Además, habría que configurar un estado inicial en el componente:
export class AppComponent {
/* Opción seleccionada por defecto del campo "select" */
tipo: string = "0";
/* Resto del código */
}
Tras eso debería funcionar (sin hacer uso del selected
en unas de las opciones):
<select [(ngModel)]="tipo" class="custom-select">
<option value="0">Citas</option>
<option value="1">Pacientes</option>
</select>
<div class="card-header-submenu">
<span *ngIf="tipo == 1">Pacientes</span>
<span *ngIf="tipo == 0">Citas</span>
</div>
He dejado la aplicación funcionando en (este enlace).
PD: No deberías usar [value]="0"
o [value]="1"
ya que el operador []
en [value]
ejecuta en javascript el código proporcionado (0
o 1
, que devuelve el valor 0
o 1
) para definir el valor que tendrá el campo value
. Bastaría con poner value="0"
y value="1"
.
Solución propuesta
Para hacer tu código más flexible deberías configurar los elementos del menú desplegable en código, así como las clases que se agregarán al icono que se muestra junto al texto, de la siguiente manera:
export class AppComponent {
tipoSeleccionado: number = 0;
tipos = [
{ id: 0, texto: "Citas", clase: "fa-user" },
{ id: 1, texto: "Pacientes", clase: "fa-calendar" }
];
}
La propiedad tipoSeleccionado
será la que indique cuál de los elementos de tipo
ha sido seleccionado y en tipos
se almacenan todas las opciones posibles.
Para mostrar el resultado haremos uso de *ngFor
para generar un <option>
por cada elemento de tipos
. Cada elemento contendrá tipo.id
como el campo que se introducirá en value
y tipo.texto
como el texto que se mostrará en el menú desplegable. Fíjate que por ahora no hacemos uso de tipo.clase
.
<select [(ngModel)]="tipoSeleccionado" class="custom-select">
<option *ngFor="let tipo of tipos" [value]="tipo.id">
{{ tipo.texto }}
</option>
</select>
Ahora haremos uso de ngClass
para que agregue la clase asociada al elemento seleccionado. Fíjate en esta ocasión que lo que hay en class="fa"
es la clase que será común sea cual sea la clase adicional que se agregará dependiendo del elemento seleccionado:
<div class="card-header-submenu">
<span>
<i class="fa" [ngClass]="tipos[tipoSeleccionado].clase"></i>
{{ tipos[tipoSeleccionado].texto }}
</span>
</div>
Puedes ver este ejemplo funcionando en (este enlace).