Conditional rendering Angular


Topic: Conditional rendering Angular

Haso58 asked 4 years ago

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>

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • 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