Angular 14 how to show and hide child components-CodePudding

I want to hide and show a Log in/Registration form on the bootstrap offcanvas component whenever I click a button but I don't know how to approach this problem.

The point is, when I click the Log in button of the navbar to open the offcanvas, I want to show the log in form by default. When I click on the Register button at the bottom of the log in component I want to hide the log in form and show the register component, and do the same with the Log in button on the register component.

navbar.component.html

<nav >
   <div >
       <div >

           <a href=""  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 >
   <div >
       <!-- 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 >
   <div >
       <!-- 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 -->

Is there a way to show and hide the components whenever I click the bottom button of the forms?

CodePudding user response：

EDITED ANSWER:

Apologies, I misread your question.

You need to assign an #id to the href of your links and then use that id in the <div > of each component.

Here is a StackBlitz demo with hopefully what you're looking for.

Of course, this is a simplified version for demonstration purposes. You have to fix the css, etc. according to your needs.

Cheers!