1

Quiero esconder y mostrar los formularios de Registro/Inicio de sesión que tengo dentro de un offcanvas de Bootstrap cuando clique en un botón.

El punto es que cuando yo clique en el botón de Log in de mi navbar para abrir el offcanvas, quiero mostrar por defecto el componente de Log in. Cuando clique en el botón de Register que hay al final del formulario quiero esconder el componente de inicio de sesión y mostrar el componente de registro, y hacer lo propio con el botón Log in del formulario de registro.

navbar.component.html

<nav class="navbar">
   <div class="container-fluid">
       <div class="d-flex">

           <a href="" class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Log in</a>
           <app-login></app-login>
           <app-register></app-register>

       </div>
   </div>
</nav>

login.component.html

<!-- Offcanvas -->
<div class="offcanvas">
   <div class="offcanvas-body">
       <!-- Form -->
       <div>
           <form>
               <!-- Form inputs and labels-->
               <div>
                   <p> Don't have an account? <a href="">Register</a></p>
               </div>
           </form>
       </div>
       <!-- Form end -->
   </div>
   <!-- Offcanvas end -->

register.component.html

<!-- Offcanvas -->
<div class="offcanvas">
   <div class="offcanvas-body">
       <!-- Form -->
       <div>
           <form>
               <!-- Form inputs and labels -->
               <div>
                   <p> Already have an account? <a href="">Log in</a></p>
               </div>
           </form>
       </div>
       <!-- Form end -->
   </div>
   <!-- Offcanvas end -->

Hay alguna manera de esconder y mostrar estos componentes?

1 respuesta 1

0

disculpa tienes que trabajar con codigo Typescript ahi, crear metodos y variables. Trabajalo con botones:

Navbar.html

 <nav class="navbar">
   <div class="container-fluid">
       <div class="d-flex">

           <button class="nav-link" click="login()" >Log in</button>
           <app-login *ngIf="isLogin"></app-login>
           <app-register *ngIf="!isLogin"></app-register>

       </div>
   </div>
</nav>

Navbar.ts

export class Navbar {
isLogin = true;

  login(){
    this.isLogin=true;
  }
  register(){
    this.isLogin = false;
  }
}

Te recomiendo que veas la documentación de Angular para que conectes tus componentes Navbar con Login y Register

1
  • Saludos, ¿estás seguro que tienes que trabajar con código TypeScript? ¿No podría usar JavaScript solamente?
    – Tupi
    Commented el 6 ago. 2022 a las 10:40

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.