How to group angular components with a root component like how the App-Component works

Question

I have a few components that are all under account.

• Username
• Password
• Profile
• ...

I want to have a parent component like how the app-component works, with a <router-outlet></router-outlet>, so that the main html of the parent component never changes but the contents of the <router-outlet></router-outlet>.

How do I go about this?

Answer 1

You can define your component route like

const appRoutes: Routes = [
  { path: '/main', component: appComponent },
  { path: 'login/:id',      component: LoginComponent },
  {
    path: 'users',
    component: userListComponent,
    data: { title: 'User List' }
  },
  { path: '',
    redirectTo: '/users',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

then in your appComponent.html

<h1>your html</h1>
<router-outlet></router-outlet>
<h1>your html</h1>

https://angular.io/guide/router

Answer 2

You can use children or loadChildren(For Lazy Loading) concepts.

export const AppRoutes:Routes = [
   {path: 'account', component: AccountComponent, children: [
             {path: 'login', component: LoginComponent},
             {path: 'profile', component: ProfileComponent}
]

In AccountComponent, you can add all common APIs and logic

In AccountComponentTemplate, add <router-outlet></router-outlet>

Use Angular Modularization concept for better maintenance.

Answer 3

Define your routes something like this:

const appRoutes: Routes = [
{ path:"", component: HomeComponent},
{ path:"accounts", component: AccountComponent, children:[
    { path:"user", component: UserComponent},
    { path:"password", component: PasswordComponent},
    { path:"profile", component: ProfileComponent}
]},
];

Define a <router-outlet> at root level as well as at child level. For child you can define it inside AccountComponent.html file.

Answer 4

You can follow something like this, that will help you in achieving what you require.

app.routing.ts

      export const AppRoutes: Routes = [{
      path: '',
      component: PARENTcomponentName1,
      children: [
      {path: 'PATH1', loadChildren: 'MODULE_PATH'}
      //more path
      ]},
      {
        path: '',
      component: PARENTcomponentName2,
      children: [
      {path: 'PATH@', loadChildren: 'MODULE_PATH'},
      ]}}]