Angularjs is a very popular js framework. This tutorial help to create a layout into angular2/4.We will convert our Bootstrap HTML theme into angularjs layout with routes. I am taking a sample bootstrap theme that will have header, footer and sidebar. I will convert them into separate partial files and use into the master layout to render all portions.

Why do we need layout or theming, Layout helps to organized your theme and easy to handle common page HTML content, without layout you can use header, footer, and sidebar into each page, that constant HTML code will repeat.You can remove that overhead using the layout.

Since, I am using angular 8/9, We will create components for each partial file. We will create a header, footer, and sidebar components and call these components into the master layout.

I will use angular CLI to create components and modules, like below,

ng create component component_name
ng create module module_name

Angular application structure
src : This folder will contain angular all modules and components.
src/assets : This folder will contain all css,fonts and js files.
src/app/shared : This folder will shared module.
src/app/shared/layout : This folder will contain all layout partial components.
src/app/shared/layout/footer : This folder will contain footer component files.
src/app/shared/layout/header : This folder will contain header component files.
src/app/shared/layout/sidebar : This folder will contain sidebar component files.
src/app/dashboard : This folder will contain dashboard component files.

I am taking Bootstrap 4 theme Shop Item. This is a very simple shop item page template using Bootstrap. This is open source with MIT type License.

So in this angular 4 layout tutorial, we will use the following main files to keep HTML content,

header.component.html : This file will contain HTML template header part.
sidebar.component.html : This file will contain HTML template sidebar part.
footer.component.html : This file will contain HTML template footer part.
layout.component.html : This file will use to include the above partial component files and create a layout template which will render on each angular request.
dashboard.component.html : This file will contain dashboard page HTML content.

Let’s create Angular Layout, I assumed you have downloaded the bootstrap theme and created a new app like the below,
ng new angular-layout

We will create a shared module,
$angular-layout/src/app > ng generate module shared

We will create a layout module,
$angular-layout/src/app/shared > ng generate module layout
$angular-layout/src/app/shared > ng generate component layout

We will create a header component,
$angular-layout/src/app/shared/layout > ng generate component header

We will create a footer module,
$angular-layout/src/app/shared/layout > ng generate component footer

We will create a sidebar component,
$angular-layout/src/app/shared/layout > ng generate component sidebar

We will create a dashboard module,
$angular-layout/src/app > ng generate module dashboard
$angular-layout/src/app > ng generate component dashboard

Now open angular-layout/.angular-cli.json file and add third party js into script array like below, if you have:

"scripts": [
	"../node_modules/jquery/dist/jquery.js"
]

And add css libs,

"styles": [
	"assest/shop-item.css",
	"../node_modules/bootstrap/dist/css/bootstrap.min.css"
]

Header component in Angular 4 Layout

We will add the header HTML element into the header component, I will use component.ts and component.html file.Open src\app\shared\layout\header\header.component.html file add below code:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container"><a class="navbar-brand" href="#">Start Bootstrap</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> </button>
<div id="navbarResponsive" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span> </a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
</ul>
</div>
</div>
</nav>

Now open header.component.ts file and changed the below codes.

selector: 'layout-header',

I have changed selector values, This refers to layout HTML container id.

Footer component in Angular 8/9 Layout

We will create a footer component into this angularjs layout example, I will modify component.ts and component.html files, Open src\app\shared\layout\footer\footer.component.html file add below code:

<footer class="py-5 bg-dark">
<div class="container">Copyright © Your Website 2017</div>
</footer>

Now open footer.component.ts file and changed the below codes:

selector: 'layout-footer',

I have changed selected values, This refers to layout footer HTML container id.

Sidebar component in Angular4 Layout

We will create a sidebar component into this angularjs layout example, I will modify component.ts and component.html files, Open src\app\shared\layout\sidebar\sidebar.component.html file add below code,

Shop Name

<div class="list-group"><a class="list-group-item active" href="#">Category 1</a> <a class="list-group-item" href="#">Category 2</a> <a class="list-group-item" href="#">Category 3</a></div>

Now open footer.component.ts file and changed the below codes:

selector: 'layout-footer',

I have changed selector values, this refers to the layout footer HTML container id.

Layout module

Now create layout/index.ts file and export all partials components,

export * from './footer/footer.component';
export * from './header/header.component';
export * from './sidebar/sidebar.component';

Shared module

We will create shared/index.ts file and export layout component

export * from './layout';
export * from './shared.module';

Now Open shared/shared.module.ts and add the below code:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    RouterModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    RouterModule
  ]
})
export class SharedModule {}

Dashboard Module in Angular4 Layout

We will create a dashboard component into this angularjs theme example, I will modify component.ts and component.html files, Open src\app\dashboard\dashboard.component.html file add below code:

<div class="card mt-4"><img class="card-img-top img-fluid" src="http://placehold.it/900x400" alt="">
<div class="card-body">
<h3 class="card-title">Product Name</h3>
<h4>$24.99</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dicta fugit fugiat hic aliquam itaque facere, soluta. Totam id dolores, sint aperiam sequi pariatur praesentium animi perspiciatis molestias iure, ducimus! <span class="text-warning">★ ★ ★ ★ ☆</span> 4.0 stars</div>
</div>
<div class="card card-outline-secondary my-4">
<div class="card-header">Product Reviews</div>
<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis et enim aperiam inventore, similique necessitatibus neque non! Doloribus, modi sapiente laboriosam aperiam fugiat laborum. Sequi mollitia, necessitatibus quae sint natus. <small class="text-muted">Posted by Anonymous on 3/1/17</small><hr>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis et enim aperiam inventore, similique necessitatibus neque non! Doloribus, modi sapiente laboriosam aperiam fugiat laborum. Sequi mollitia, necessitatibus quae sint natus. <small class="text-muted">Posted by Anonymous on 3/1/17</small><hr>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis et enim aperiam inventore, similique necessitatibus neque non! Doloribus, modi sapiente laboriosam aperiam fugiat laborum. Sequi mollitia, necessitatibus quae sint natus. <small class="text-muted">Posted by Anonymous on 3/1/17</small><hr><a class="btn btn-success" href="#">Leave a Review</a></div>
</div>

Now open dashboard.module.ts file and replaced it with the below codes.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { ModuleWithProviders } from "@angular/core";

import { DashboardComponent } from './dashboard.component';
import { SharedModule } from '../shared'; 

const dashboardRouting: ModuleWithProviders = RouterModule.forChild([
  {
    path: '',
    component: DashboardComponent
  }
]);

@NgModule({
  imports: [
    CommonModule,
    dashboardRouting,
    SharedModule
  ],
  declarations: [
  	DashboardComponent
  ]
})
export class DashboardModule { }

App Component in Angular Layout Example

We have created all partials components and changed HTML layout, now I will call the layout into the app root component, open app.componenent.html file and replace with below code:

<div class="container">
<div class="row">
<div class="col-lg-3">&nbsp;</div>
<div class="col-lg-9">&nbsp;</div>
<div>&nbsp;</div>
</div>
</div>

Now we will modify app.module.ts file and added below code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ModuleWithProviders } from "@angular/core";

import { AppComponent } from './app.component';
import { DashboardModule } from './dashboard/dashboard.module';
import { SharedModule } from './shared/shared.module';
import { FooterComponent } from './shared/layout/footer/footer.component';
import { HeaderComponent } from './shared/layout/header/header.component';
import { SidebarComponent } from './shared/layout/sidebar/sidebar.component';
import { DashboardComponent } from './dashboard/dashboard.component';

const rootRouting: ModuleWithProviders = RouterModule.forRoot([], { useHash: true });

@NgModule({
  declarations: [
    AppComponent,
    FooterComponent,
    HeaderComponent,
    SidebarComponent
  ],
  imports: [
    BrowserModule,
    rootRouting,
    DashboardModule,
    SharedModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now run ng serve command to view your layout on http://localhost:4200.

Conclusion:

I have created Layout using angular4 and bootstrap 4. You can create multiple layouts and use into angular app, like for registered and guest users.