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?