Is there a way to load a component inside another component by changing the route.
Let me explain:
I have the basic route config in the app-routing.module.ts
and the router-outlet
tag in the app.component.html
, which can navigate to a path setup in the route config.
app-routing.module.ts
const routes: Routes = [
{ path: 'dashboard', component:DashboardComponent},
...
];
app.component.html
<router-outlet></router-outlet>
So localhost:4200/dashboard
- would load the dashboard component.
What I want to do is to put another <router-outlet></router-outlet>
in the dashboard.component.html
along with other html such as navigation bar, top bar etc. So that when I change the URL to localhost:4200/dashboard/user
, it renders the user.component
inside the dashboard.component
in the place of router-outlet
along with all the navigation bar, top bar etc. and not replacing the entire dashboard
component with user
component.
I am new to the Angular world so wanted to know if there are better ways to do it?
Extra info:
I understand that @ViewChild
can replace a part of a component but that would not directly change the url and also from the loaded view child if I want to render another child that replaces the loaded on would be difficult.
First configure the children to contain the two routes you need. Then create a new component called dashboard-wrapper, this will contain the html you want to share and the router outlet.
const routes: Routes = [
{
path: 'dashboard',
component: DashboardWrapperComponent,
children: [
{
path: '',
component: DashboardComponent,
},
{
path: 'user',
component: UserComponent,
},
]
},
...
];
The dashboard wrapper HTML will look like this.
<app-navbar/>
<app-top-bar/>
<router-outlet></router-outlet>