Is there a way to create nested router-outlet that replace a component partial in angular

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>