1

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');
    }
  }
}
    
1
  • Intentaste quitar el *ngIf para corroborar que se muestra el modal?
    – Jimmy
    Commented el 29 ene. a las 22:53

2 respuestas 2

0

tal ves sea por la deteccion de cambios de angular prueba con este en tu constructor coloca el ChangeDetectorRef de la importacion de angular core :

  constructor (private fb:FormBuilder, private http:HttpClient,
  private change: ChangeDetectorRef){}

y luego de tus consola coloca lo siguiente :

activarModal(id: number){
    if (id == 1){
      this.modalJugadorVisible = true;
      console.log('Modal jugador activado');
      this.change.markForCheck()
    }else if (id == 2){
      this.modalOjeadorVisible = true;
      console.log('Modal ojeador visible');
      this.change.markForCheck()
    }
  }

el markForCheck de Angular sirve para verificar el componente si hay algun cambio en la vista

1
  • en caso no te llege a funcionar eso utiliza esto : this.change.detectChanges() :D Commented el 29 ene. a las 20:25
0

Utilizando como referencia el *ngIf asumo que tu proyecto sea en Angular y de ser así el caso no creo que este utilizando de forma correcta los modals

Ejemplo de uso de Modals con @angular/material

HTML


<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)="abrirModal(1)">JUGADOR</button>
            <button class="btn btn-outline-dark btn-lg px-5 py-3 me-sm-3 fs-6 fw-bolder" (click)="abrirModal(2)">OJEADOR</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<ng-template #modalContentJugador>
  <div><p>Hola soy un modal de jugador que se ve</p> <button (click)="close()">Cerrar</button></div>
</ng-template>

<ng-template #modalContentOjeador>
  <div><p>Hola soy un modal de ojeador que se ve</p> <button (click)="close()">Cerrar</button></div>
</ng-template>

.ts


import { Component, TemplateRef, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild('modalContentJugador') modalContentJugador!: TemplateRef<any>;
  @ViewChild('modalContentOjeador') modalContentOjeador!: TemplateRef<any>;

  constructor(public dialog: MatDialog) {}

  abrirModal(id: number): void {
    let dialogRef;
    let contentTemplate!: TemplateRef<any>;

    if (id === 1) {
      contentTemplate = this.modalContentJugador;
    } else if (id === 2) {
      contentTemplate = this.modalContentOjeador;
    }

    dialogRef = this.dialog.open(contentTemplate);

    // Puedes realizar acciones después de cerrar el modal, si es necesario
    if (dialogRef) {
      dialogRef.afterClosed().subscribe((result) => {
        console.log('Modal cerrado', result);
      });
    }
  }

  close() {
    this.dialog.closeAll();
  }
}

   

Demo Live

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.