Skip to main content
angular-5-layout-using-bootstrap-theme

Create Angular 9 Layout and Theme Using Bootstrap

Last Updated: | By: JsTutorials Team Angular

This angular 5 tutorial help to convert a simple bootstrap theme into an angular 9 layout using bootstrap. We will download a simple Bootstrap admin theme. This is a simple bootstrap admin that will use in this angular 5 template tutorial.

We will divide the bootstrap theme into header, footer and sidebar components. We will import that angular 5 components into the main home component to render into the application index page.

The Bootstrap Admin Theme has following features

  • Login
  • Sign Up
  • Admin Dashboard
  • Full Calendar (Viewing calendar, adding events, dragging events)
  • Statistics & Charts (Multiple examples of Pie, Bar, Line charts using Morris.js, knob.js, jquery flot, easypiechart)
  • Buttons & Icons
  • WYSIWYG & HTML 5 Editors
  • Forms & Wizard
  • Form Plugins (Validation, masked input, tags, color picker, date, time, location, inline edit and more)
  • Tables & Bootstrap dataTables
  • UI & Interface Elements (Modals, Popovers, Tooltips, Alerts, Notifications, Labels, Progress Bars)

We will create angular 5 application using the below angular CLI, You can get more information from Getting started with angular 4 tutorial.

ng new bootstrap-theme-layout-angular5

This angular 5 tutorial have following modules and component:

  • We will create Home Module and Componenet into src/app/.
  • Shares Module into src/app/.
  • Layout Module into src/app/shared/.
  • Header Component into src/app/shared/.
  • Footer Component into src/app/shared/.
  • Sidebar Component into src/app/shared/.

We will create shared and layout module into this tutorial,

$src/app/> ng generate module shared
$src/app/> cd shared
$src/app/shared> ng generate module layout

We will create a barrel file index.ts for each module, shared and layout, to export components. I will create these files later on this project.

Create Header Component

We will create header component using angular CLI.

$src/app/shared/layout> ng generate component header

Open src/app/shared/layout/header.component.html file and add below code into this file:

<div class="container">
<div class="row">
<div class="col-md-5"><!-- Logo -->
<div class="logo">
<h1><a href="index.html">Bootstrap Admin Theme</a></h1>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-lg-12">
<div class="input-group form"><input class="form-control" type="text" placeholder="Search..."> <span class="input-group-btn"> <button class="btn btn-primary" type="button">Search</button> </span></div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navbar navbar-inverse" role="banner"><nav class="collapse navbar-collapse bs-navbar-collapse navbar-right" role="navigation">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">My Account <b class="caret"></b></a>
<ul class="dropdown-menu animated fadeInUp">
<li><a href="profile.html">Profile</a></li>
<li><a href="login.html">Logout</a></li>
</ul>
</li>
</ul>
</nav></div>
</div>
</div>
</div>

Now open src/app/shared/layout/header.component.ts file and add the below code:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'layout-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Create Footer Component

We will create footer component using angular CLI into layout folder.

$src/app/shared/layout> ng generate component footer

Open src/app/shared/layout/footer.component.html file and add below code into this file,

<div class="container">
<div class="copy text-center">Copyright 2018 <a href="http://js-tutorials.com">js-tutorials.com</a></div>
</div>

Now open src/app/shared/layout/footer.component.ts file and add below code,

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'layout-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Create Sidebar Component

We will create sidebar component using angular CLI into layout folder.

$src/app/shared/layout> ng generate component sidebar

Open src/app/shared/layout/sidebar.component.html file and add the below code into this file,

<ul class="nav">
    <!-- Main menu -->

 	<li class="current"><a href="index.html"><i class="glyphicon glyphicon-home"></i> Home</a></li>

</ul>

Now open src/app/shared/layout/sidebar.component.ts file and add below code:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'layout-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Create a barrel file in the layout folder src/app/shared/layout/index.ts, This file will export component HeaderComponent, FooterComponent and SidebarComponent. 

export * from './layout';

Now create a root barrel file in the shared folder src/app/shared/index.ts.We will export our layout folder. 

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

We will Create Home Component and Module

We will generate home module and angular 5 home component using below angular CLI command.

$src/app/> ng generate module home
$src/app/> ng generate component home

We will open src/app/home/home.component.html file and add the below code.

<div class="row">
<div class="col-md-6">
<div class="content-box-large">
<div class="panel-heading">
<div class="panel-title">New vs Returning Visitors</div>
<div class="panel-options">&nbsp;</div>
</div>
<div class="panel-body">Ut tristique adipiscing mauris, sit amet suscipit metus porta quis. Donec dictum tincidunt erat, eu blandit ligula. Nam sit amet dolor sapien. Quisque velit erat, congue sed suscipit vel, feugiat sit amet enim. Suspendisse interdum enim at mi tempor commodo. Sed tincidunt sed tortor eu scelerisque. Donec luctus malesuada vulputate. Nunc vel auctor metus, vel adipiscing odio. Aliquam aliquet rhoncus libero, at varius nisi pulvinar nec. Aliquam erat volutpat. Donec ut neque mi. Praesent enim nisl, bibendum vitae ante et, placerat pharetra magna. Donec facilisis nisl turpis, eget facilisis turpis semper non. Maecenas luctus ligula tincidunt iasdsd vitae ante et,</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="content-box-header">
<div class="panel-title">New vs Returning Visitors</div>
<div class="panel-options">&nbsp;</div>
</div>
<div class="content-box-large box-with-header">Pellentesque luctus quam quis consequat vulputate. Sed sit amet diam ipsum. Praesent in pellentesque diam, sit amet dignissim erat. Aliquam erat volutpat. Aenean laoreet metus leo, laoreet feugiat enim suscipit quis. Praesent mauris mauris, ornare vitae tincidunt sed, hendrerit eget augue. Nam nec vestibulum nisi, eu dignissim nulla.</div>
</div>
</div>
</div>
</div>

We will open src/app/home/home.component.ts and add the below code.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

We will open the module src/app/home/home.module.ts file and add below code,

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

import { HomeComponent } from './home.component';
import { SharedModule } from '../shared'; 

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

@NgModule({
  imports: [
    CommonModule,
    homeRouting,
    SharedModule
  ],
  declarations: [
  	HomeComponent
  ]
})
export class HomeModule { }

We will import HomeComponent, HeaderComponent, FooterCompenent and SidebarComponent into src/app/app.module.ts file.

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

import { AppComponent } from './app.component';
import { HomeModule } from './home/home.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';

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

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

We will open src/app/app.component.html file and replace content with below code,

<div class="header">
  <layout-header></layout-header>
</div>


<div class="page-content">

<div class="row">

<div class="col-md-2">

<div class="sidebar content-box" style="display: block;">
        <layout-sidebar></layout-sidebar>
</div>

</div>

We will create barrel file into app/index.ts file and export app component. 

export * from './app.component';
export * from './app.module';

Conclusion:

We have converted simple bootstrap admin theme into angular 5 tutorial, I have used angular 5 route module for routing view.I have split view into shared components like sidebar,header and footer then exported that component and import into main view.

One thought to “Create Angular 9 Layout and Theme Using Bootstrap”

Leave a Reply

Your email address will not be published. Required fields are marked *