Tengo dos botones con opciones de tipo de cuenta, dependiendo cual elija el usuario se deberia abrir un modal con su formulario especifico de registro, el problema es que nunca se muestra dicho modal. Ya agregue unos console.log y asi se que la funcion si se activa por que llega el mensaje a consola, pero sigo sin ver su modal. Comparto el codigo html que usa ngIf para definir cual de los dos modales activar y llama a una funcion de typeScript que actualiza el valor de las variables:
<body>
<div class="container-fluid vh-100 d-flex align-items-center justify-content-center m-0 p-0">
<div class="text-center">
<div class="titulo">
<h1>ScoutLink</h1>
<div class="contenido-titulo">
<div class="subtitulo-opciones">
<div id="caja-subtitulo">
<p id="selecciona">SELECCIONA</p>
<p id="tipo-cuenta">TU TIPO DE CUENTA</p>
</div>
<div class="opciones">
<button class="btn btn-outline-dark btn-lg px-5 py-3 me-sm-3 fs-6 fw-bolder" (click)="activarModal(1)">JUGADOR</button>
<button class="btn btn-outline-dark btn-lg px-5 py-3 me-sm-3 fs-6 fw-bolder" (click)="activarModal(2)">OJEADOR</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="modalJugador" class="modal" *ngIf="modalJugadorVisible">
<div class="modal-content">
<h2>Crea tu cuenta</h2>
<form [formGroup]="jugadorForm" (ngSubmit)="onSubmit()">
<div class="form-group.">
<label for="nombre">Nombre:</label>
<input type="text" formControlName="nombre" class="form-control">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" formControlName="email" class="form-control">
</div>
<div class="form-group">
<label for="fotoPerfil">Foto de perfil:</label>
<input type="file" formControlName="fotoPerfil" class="form-control">
</div>
<button type="submit">ENVIAR</button>
</form>
</div>
</div>
export class RegistroComponentComponent{
modalJugadorVisible = false;
modalOjeadorVisible = false;
jugadorForm: FormGroup = new FormGroup ({});
constructor (private fb:FormBuilder, private http:HttpClient){
}
activarModal(id: number){
if (id == 1){
this.modalJugadorVisible = true;
console.log('Modal jugador activado');
}else if (id == 2){
this.modalOjeadorVisible = true;
console.log('Modal ojeador visible');
}
}
}