2

How to Convert Bootstrap 4 theme into Angular 4 Layout

 2 years ago
source link: https://www.js-tutorials.com/angularjs-tutorial/convert-bootstrap-4-theme-angular-4-layout/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

How to Convert Bootstrap 4 theme into Angular 4 Layout

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

Why do we need layout or theming, Layout help to organised 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 layout.

Since, I am using angular 4, so We will create component for each partial files.We will create header, footer and sidebar component and call these component into master layout.

I will use angular CLI to create component and module, 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 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 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 above partial component files and create layout template which will render on each angular request.
dashboard.component.html : This file will contain dashboard page html content.

Lets create Angular Layout,I assumed you have downloaded bootstrap theme and create new app like below,
ng new angular-layout

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

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

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

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

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

We will create 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 header HTML element into 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">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <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 below codes.

selector: 'layout-header',

I have changed selecter values, this refres to layout html container id.

Footer componenet in Angular 4 Layout

We will create footer component into this angularjs layout example, I will modified 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">
<p class="m-0 text-center text-white">Copyright © Your Website 2017</p>
  </div>
  <!-- /.container -->
</footer>

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

selector: 'layout-footer',

I have changed selecter values, this refres to layout footer html container id.

Sidebar componenet in Angular4 Layout

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

  <h1 class="my-4">Shop Name</h1>
  <div class="list-group">
<a href="#" class="list-group-item active">Category 1</a>
<a href="#" class="list-group-item">Category 2</a>
<a href="#" class="list-group-item">Category 3</a>
  </div>

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

selector: 'layout-footer',

I have changed selector values, this refers to 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 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 dashboard component into this angularjs theme example, I will modified 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>
  <p class="card-text">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!</p>
  <span class="text-warning">★ ★ ★ ★ ☆</span>
  4.0 stars
</div>
  </div>
  <!-- /.card -->
  <div class="card card-outline-secondary my-4">
<div class="card-header">
  Product Reviews
</div>
<div class="card-body">
  <p>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.</p>
  <small class="text-muted">Posted by Anonymous on 3/1/17</small>
  <hr>
  <p>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.</p>
  <small class="text-muted">Posted by Anonymous on 3/1/17</small>
  <hr>
  <p>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.</p>
  <small class="text-muted">Posted by Anonymous on 3/1/17</small>
  <hr>
  <a href="#" class="btn btn-success">Leave a Review</a>
</div>
  </div>
  <!-- /.card -->

Now open dashboard.module.ts file and replaced with 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 component and changed html layout, now I will call layout into app root component, open app.componenent.html file and replace with below code ,

<!--The content below is only a placeholder and can be replaced.-->
<layout-header></layout-header>
<div class="container">
<div class="row">
<div class="col-lg-3">
<layout-sidebar></layout-sidebar>
</div>
<div class="col-lg-9">
<router-outlet></router-outlet>
</div>
<div>
</div>
<layout-footer></layout-footer>

Now we will modified 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.

angular4-layout-theme-bootstrap4

Conclusion:

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK