Angular hidden div dynamically unhiding best practices - html

Question

I'm building an Angular application with a login page. The login page contains the following elements:
Login form
Password forgot form
Password forgot acknowledge message
Password reset form (you end up here after clicking the link sent by e-mail)
Loading spinner
At first, the login form should be presented. When you click the forgot my password link, the login form should disappear and the password forgot form should appear in which a user can enter his email address and press a button to request a new password. Next on, the user is presented the password forgot acknowledge message with text stating what is going to happen next.
When the user clicks the link sent by e-mail he is redirected to the login page again and presented with the password reset form where he can enter his desired password.
What I have currently done is written all divs successively in the login.component.html page. By default all are hidden except for the login form using (example) *ngIf="forgotpassword" [#fadeInOutRight]. Then, based on buttons or links clicked on the page dynamically divs fly in and out of the screen using Angular Animations.
I was wondering if this is good practice or if there's any other technique that should be used to dynamically change the content of the page.
Any tips are much appreciated.
Thanks!

Answer 1

You should probably use routing for the purpose you are describing. Have a look at https://angular.io/guide/router
That's at least how I would do it. It has multiple advantages:
Clearly seperates the code into cohesive components that serve one purpose
The users and you can now directly access the routes
You don't have to write the hiding/switching logic, because Angluar already provides that
The clear seperation makes it easier to test

Answer 2

first ngIf does the trick, you can also consider using the [hidden] property. The difference is with ngIf, you create and delete elements from the DOM, while with the [hidden] property you just hide them. But as long as your users will not spam switching from one form to another, I think it's fine using ngIf.
I would recommand splitting your login page in components. For example, one for the login form itself, another one for the password forgot form, etc...
This way, when the user click the forgot password button, you just direct her/him to the corresponding component.
Hope that helps