Template Integration in Angular Framework

Step1st:- Download Template and extract

Step2nd:- copy all css,js,img into assets

step3rd:- copy all CSS and js into index.html

Step4th:- copy the header part of the template and footer part of the template in appcomponet.html and in the middle part router-outlet should be similar to this

<div id="page">

<nav class="gtco-nav" role="navigation">
<div class="gtco-container">

<div class="row">
<div class="col-sm-2 col-xs-12">
<div id="gtco-logo"><a href="index.html">Beryllium</a></div>
</div>
<div class="col-xs-10 text-right menu-1">
<ul>
<li class="active"><a routerLink="home">Home</a></li>
<li><a routerLink="about">About</a></li>
<li class="has-dropdown">
<a href="services.html">Services</a>
<ul class="dropdown">
<li><a href="#">Web Design</a></li>
<li><a href="#">eCommerce</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">API</a></li>
</ul>
</li>
<li class="has-dropdown">
<a href="#">Dropdown</a>
<ul class="dropdown">
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">Sass</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>

</div>
</nav>

<router-outlet></router-outlet>

<footer id="gtco-footer" class="gtco-section" role="contentinfo">
<div class="gtco-container">
<div class="row row-pb-md">
<div class="col-md-4 gtco-widget gtco-footer-paragraph">
<h3>Beryllium</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat enim et urna sagittis, rhoncus euismod.</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-6 gtco-footer-link">
<h3>Links</h3>
<ul class="gtco-list-link">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-md-6 gtco-footer-link">
<h3>Work</h3>
<ul class="gtco-list-link">
<li><a href="#">New York Arena</a></li>
<li><a href="#">Eagle Park</a></li>
<li><a href="#">Nationals Park</a></li>
<li><a href="#">Manila Park</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 gtco-footer-subscribe">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="" placeholder="Email">
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
</div>
</div>
<div class="gtco-copyright">
<div class="gtco-container">
<div class="row">
<div class="col-md-6 text-left">
<p><small>© 2016 Free HTML5. All Rights Reserved. </small></p>
</div>
<div class="col-md-6 text-right">
<p><small>Designed by <a href="http://freehtml5.co/" target="_blank">FreeHTML5.co</a> Demo Images: <a href="http://pixeden.com/" target="_blank">Pixeden</a> & <a href="http://unsplash.com" target="_blank">Unsplash</a></small> </p>
</div>
</div>
</div>
</div>
</footer>


</div>

<div class="gototop js-top">
<a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
</div>

Step5th:- Create Route under app-route-module.cs:-

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

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

import { CalcComponent } from './calc/calc.component';

import { CheckboxexampleComponent } from './checkboxexample/checkboxexample.component';

import { FactappComponent } from './factapp/factapp.component';

import { ScsComponent } from './scs/scs.component';

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

import { AboutComponent } from './about/about.component';

const routes: Routes = [

{ path: '', redirectTo: '/home', pathMatch: 'full' },

{path:"calc/:id", component:CalcComponent},

{path:"checkbox", component:CheckboxexampleComponent},

{path:"fact", component:FactappComponent} ,

{path:"scs", component:ScsComponent} ,

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

{path:"about", component:AboutComponent}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule {

}

5) define routerLink in navigation under app-component

6) Check proper path of css and js of index.html file sample of index.html

<!doctype html>

<head>

<title>ShivaTutorials</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

7) Sample of about.component.html of about component