CODEWITHSUNDEEP
angular
aw04
aw04

Reputation: 11177

Specify a different root component for specific route

Have an app with a root app component containing the site menu/basic layout. I would like to add a section (a few routes/components) that would use a different root component (not show the menu, etc).

I've created a new module but not sure where to go from here, is there a way to do this without blowing up the initial layout?

Edit: after posting I found this very similar question, though it has no answers.

Upvotes: 0

Views: 419

Answers (1)

user2842256
user2842256

Reputation: 81

you can break the your components in to a structure which can be more manageable. I have done something similar where I have public pages with a different header and private pages with a different one. To achieve that you can create modules and then configure routes for those modules or try something similar to the following:

const routes: Routes = [
{
    path: '', component: rootCommonComponent, //with some common logic
    children: [
       {
       path: '', component: publicHeaderComponent, 
           children: [
                     { path: '', component: HomeComponent },
                     { path: 'about-us', component: AboutUsComponent }
                    ]
       },
       {
         path: '', component: dashboardHeaderComponent, 
           children: [
                    { path: 'dashboard', component: DashboardComponent },
                    { path: 'user-profile', component: UserProfileComponent}
                    ]
        }
    ]
}
];

The above solution can work out in a single module. However, to have more manageable code I would suggest to break things down into module.

Upvotes: 1

Related Questions