Estoy tratando de hacer un render condicional con un ngSwitchCase pero no logro que la variable tome el valor correspondiente. la variable selectedService deberia recibir los valores del menu desplegabley en base a eso renderizar lo que corresponda en el ngSwitchCase de mas abajo, por defecto recibe 'consultorio' pero no logro que raciba el valor correcto cambio en el menu.
el HTML es el siguiente:
<div class="col-8">
<form class="col-8 offset-1">
<div class="form-group">
<label for="serviceType">Tipo de Servicio</label>
<select [(ngModel)]="selectedService" class="form-control">
<option value="consultorio">Consultorio</option>
<option value="paseSala">Pase de Sala</option>
<option value="guardia">Guardia</option>
</select>
<p>valor seleccionado: {{selectedService}}</p>
<div [ngSwitch]="selectedService">
<div *ngSwitchCase="'consultorio'">
<h1>consultorio</h1>
</div>
<div *ngSwitchCase="'paseSala'">
<h1>pase de sala</h1>
</div>
<div *ngSwitchCase="'guardia'">
<h1>guardia</h1>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Guardar</button>
</form>
</div>
el archivo TS es el siguiente:
import { Component } from '@angular/core';
@Component({
selector: 'app-profsessional-form',
templateUrl: './profsessional-form.component.html',
styleUrls: ['./profsessional-form.component.css']
})
export class ProfsessionalFormComponent {
selectedService: string = 'consultorio';
}
y el app.module.ts es el siguiente:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { ProfsessionalFormComponent } from './profsessional-form/profsessional-form.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
ProfsessionalFormComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }