In Angular 2 and later versions, you can create multiple layouts for your application using routing and nested routes. By defining different layouts and associating them with specific routes, you can have different components, header, footer, and overall structures for different parts of your application. Here's a step-by-step guide on how to achieve this:

Step 1: Set up your Angular application Make sure you have a functional Angular application set up using the Angular CLI or your preferred method.

Step 2: Define your layouts Create separate layout components that will serve as containers for different parts of your application. For example, you can have a "DefaultLayoutComponent" and an "AdminLayoutComponent".

Step 3: Create routes for each layout In your app-routing.module.ts file (or a separate routing module), define routes for each layout and associate them with the corresponding layout components.

import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.component'; import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component'; const routes: Routes = [ { path: '', component: DefaultLayoutComponent, children: [ { path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) }, { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }, ] }, { path: 'admin', component: AdminLayoutComponent, children: [ { path: '', loadChildren: () => import('./admin/dashboard/dashboard.module').then(m => m.DashboardModule) }, { path: 'users', loadChildren: () => import('./admin/users/users.module').then(m => m.UsersModule) }, ] }, // Add more layouts and routes as needed ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

In this example, we have two layouts: "DefaultLayoutComponent" and "AdminLayoutComponent". Each layout has its set of routes defined as children routes.

Step 4: Implement the layout components Create the layout components (default-layout.component.ts and admin-layout.component.ts) and add the necessary header, footer, and other elements to define the structure of each layout.

Step 5: Set the <router-outlet> in each layout component In your layout component templates, add the <router-outlet> tag where the content of the corresponding route will be rendered.

For example, in default-layout.component.html:

<app-header></app-header> <!-- Add your header component --> <router-outlet></router-outlet> <app-footer></app-footer> <!-- Add your footer component -->

In admin-layout.component.html:

<app-admin-header></app-admin-header> <!-- Add your admin header component --> <router-outlet></router-outlet> <app-admin-footer></app-admin-footer> <!-- Add your admin footer component -->

Step 6: Add your components and modules for each route Create your components and modules that will be displayed in each layout. For example, in the "home" and "about" routes, the components will be rendered inside the <router-outlet> of DefaultLayoutComponent. In the "dashboard" and "users" routes, the components will be rendered inside the <router-outlet> of AdminLayoutComponent.

Now, when navigating to different routes, Angular will automatically load the corresponding layout component based on the defined routes. The child components will be rendered inside the appropriate <router-outlet>, providing different layouts for different parts of your application.

Remember to adjust the example code above based on your actual component names, modules, and routing requirements. You can create as many layouts as needed and associate them with different routes to have multiple layouts in your Angular application.

Have questions or queries?
Get in Touch