Layout Directory

~/src/app/layout

The layout directory is a container of components which are declared in the AppModule. The directory contains page-level components of content such as a common footer, navigation, and header. It also contains page layouts for the different sections of your application.

Components like footer and navigation are handled the Angular way by importing them into a template:

<app-nav></app-nav>

Layouts are handled in a rather clever way. By using child routes a top level route can define a layout to be used for its children. Each module has its own routing so the top level AppRoutingModule includes the module as a child of a route. This code block is taken from app-routing.module.ts and trimmed of extra content:

{
  path: '',
  component: ContentLayoutComponent,
  children: [
    {
      path: 'dashboard',
      loadChildren: () =>
        import('./modules/home/home.module').then(m => m.HomeModule)
    }
  ]
}

When a route is called at /dashboard the ContentLayoutComponent is used as a layout and handling of the routing is handed off to the HomeModule. The ContentLayoutComponent has a router-outlet:

<div [class]="theme">
  <div class="mat-app-background">
    <app-nav></app-nav>

    <div class="container">
      <router-outlet></router-outlet>
    </div>

    <app-footer (changeTheme)="onThemeChange($event)"></app-footer>
  </div>
</div>

This router-outlet is used to display a route and component defined in the routing of the HomeRoutingModule:

So the routes are /dashboard and /dashboard/projects/:id and they use the ContentLayoutComponent for their layout.

Install

mkdir src/app/layout
ng generate component layout/Header
ng generate component layout/Footer

---

This is documentation for angular-folder-structure. If you find this useful please add your ★ star to the project.