Topic: Conditional rendering Angular
In my angular project I have a side nav-component which I have put in my app-component.html so it will be rendered in every other component (Admin dashboard). But now I have the problem that my sidenav comes in my login screen too which makes sense, because my login html is there as a router-outlet.
I tried to add a variable url and tried with ngIf to render the component only when it is not equal with url=/login but it hided the sidenav in every other compoenent. I do not know how to change it so it will be rendered in every other component except login screen without putting it manually. Maybe someone here can help me out What I want is that
this is my app.component.html
<moniesta-client-dashboard-navigation></moniesta-client-dashboard-navigation> <router-outlet></router-outlet>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 10.0.0
- Device: Computer
- Browser: Chrome
- OS: Ubuntu
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 4 years ago
The best way to display content only for logged in users would be to use route guard. You can read more about it in the Angular official documentation: https://angular.io/guide/router#preventing-unauthorized-access
Haso58 commented 4 years ago
Sorry for the late reply, will this also work if it is in the app component? As it is rendered alongside the login component?
Arkadiusz Idzikowski staff commented 4 years ago
It's hard to say because the implementation method may differ from application to application. In some cases, you may want to prepare two different components (for example welcome screen and actual user dashboard) and load them depending on whether the user is logged in.