How to convert HTML Template to Angular 6 Template

First, download any HTML Template from the web. (I downloaded from here).

Create an Angular application using angular-cli

ng new angular-template

Copy all the folders and files in downloaded template past it in src/assets folder(Except HTML files).

Then Include these files into angular.json file scripts and styles section.

“styles”: [
  “src/styles.css”,
  “src/assets/css/custom.css”,
  “src/assets/vendor/bootstrap/css/bootstrap.min.css”,
  “src/assets/vendor/font-awesome/css/font-awesome.min.css”,
  “src/assets/css/fontastic.css”,
  “src/assets/css/grasp_mobile_progress_circle-1.0.0.min.css”,
  “src/assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css”,
  “src/assets/css/style.default.css”
],
“scripts”: [
  “src/assets/vendor/jquery/jquery.min.js”,
  “src/assets/vendor/popper.js/umd/popper.min.js”,
  “src/assets/vendor/bootstrap/js/bootstrap.min.js”,
  “src/assets/js/grasp_mobile_progress_circle-1.0.0.min.js”,
  “src/assets/vendor/jquery.cookie/jquery.cookie.js”,
  “src/assets/vendor/chart.js/Chart.min.js”,
  “src/assets/vendor/jquery-validation/jquery.validate.min.js”,
  “src/assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js”,
  “src/assets/js/charts-home.js”,
  “src/assets/js/front.js”
]
Now create template layout using components
ng g component components/layout/header
ng g component components/layout/sidemenu
ng g component components/layout/footer
Now create site components
ng g component components/site/home
ng g component components/site/charts
ng g component components/site/forms
ng g component components/site/login
ng g component components/site/register
ng g component components/site/tables
Analyze downloaded code and past segregate it into the layout.
side menu code past into sidemenu.component.html
header code past into header.component.html
footer code past into footer.component.html
Main contains past in site components
Now write routing for the corresponding site in app.module.ts file
import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { HeaderComponent } from './components/layout/header/header.component';

import { SidemenuComponent } from './components/layout/sidemenu/sidemenu.component';

import { FooterComponent } from './components/layout/footer/footer.component';

import { HomeComponent } from './components/site/home/home.component';

import { ChartsComponent } from './components/site/charts/charts.component';

import { FormsComponent } from './components/site/forms/forms.component';

import { LoginComponent } from './components/site/login/login.component';

import { RegisterComponent } from './components/site/register/register.component';

import { TablesComponent } from './components/site/tables/tables.component';

import { RouterModule, Routes } from '@angular/router';

import { registerContentQuery } from '@angular/core/src/render3/instructions';

const appRoutes: Routes = [

{ path: 'login', component: LoginComponent },

{ path: 'home', component: HomeComponent},

{ path: 'register', component : RegisterComponent},

{ path: 'charts', component : ChartsComponent},

{ path: 'forms', component : FormsComponent},

{ path: 'tables', component : TablesComponent},

{ path: '',

redirectTo:'/home',

pathMatch:'full'

}

];

@NgModule({

declarations: [

AppComponent,

HeaderComponent,

SidemenuComponent,

FooterComponent,

HomeComponent,

ChartsComponent,

FormsComponent,

LoginComponent,

RegisterComponent,

TablesComponent

],

imports: [

BrowserModule,

RouterModule.forRoot(appRoutes)

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

past the below code in app.component.html

outlet.PNG

Change Links href to routerLink in sidemenu.componet.ts

Git Link:  https://github.com/iamchandu/html-to-angular6-template

4 thoughts on “How to convert HTML Template to Angular 6 Template

  1. You explained it perfectly 🙂 I was trying to convert HTML template into Angular 7 first time and I was able to do it in first go with the help of your post 🙂

    Thank you for posting this.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
%d bloggers like this: