0
I have a Dashboard component, inside it I have a sidebar, which has the effect of changing the components that will be rendered on the screen, the 4 components that can be loaded, are at the bottom of the page, but I have difficulties to deal with this navigation, someone could give an idea of how this can be done ?
Dashboard:
<app-navbar></app-navbar>
<div style="display: flex; height: 90vh;">
<div>
<nav class="bg-light border-right" id="sidebar-wrapper">
<div class="list-group list-group-flush">
<a href="#" routerLink="/dashboard/funil" class="list-group-item list-group-item-action bg-light">Funil</a>
<a href="#" routerLink="/dashboard/prospeccoes" class="list-group-item list-group-item-action bg-light">Prospecções</a>
<a href="#" routerLink="/dashboard/leads-ganhas" class="list-group-item list-group-item-action bg-light">Ganhas</a>
<a href="#" routerLink="/dashboard/leads-perdidas" class="list-group-item list-group-item-action bg-light">Perdidas</a>
</div>
</nav>
</div>
<app-funil (situationSidebar)="onChangeSidebar()"></app-funil>
<app-prospeccoes (situationSidebar)="onChangeSidebar()"></app-prospeccoes>
<app-leads-ganhas (situationSidebar)="onChangeSidebar()"></app-leads-ganhas>
<app-leads-perdidas (situationSidebar)="onChangeSidebar()"></app-leads-perdidas>
</div>
also do not know if the most ideal would be to have the routes this way:
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent, children: [
{ path: 'funil', component: FunilComponent },
{ path: 'prospeccoes', component: ProspeccoesComponent },
{ path: 'leads-ganhas', component: LeadsGanhasComponent },
{ path: 'leads-perdidas', component: LeadsPerdidasComponent },
]
},
];
I didn’t get it right. Your problem is that the 4 components are being shown in place of a specific depending on the route? For this you need to use the router-outlet, which depending on the route will show the expected component: https://angular.io/api/router/RouterOutlet
– veroneseComS
I’m new at the angle, and I don’t have much experience with routes, that would be the idea: when clicking on the sidebar, in the "Funnel" field for example, display the "app-funnel" component, when clicking on Prospections, display the "app-prospecting" component and so on, but I haven’t found a way to do that yet, it would be ideal to exchange these 4 components for the router-outlet ?
– Arthur Felipe
The router-outlet serves as a "portal" where you will render in that location the component that corresponds with your route, you have already declared completely your routes to carry the expected component, just change in place of <app-funnel ... > and the other components a <router-outlet>, when clicking on the menu will be loaded inside the router-outlet the component that matches your route.
– veroneseComS
Putz, it was really that, simple thing that I didn’t even imagine it could be, Brigadão kkk ;)
– Arthur Felipe