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

Change Links href to routerLink in sidemenu.componet.ts

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