I am new to angular . I am converting HTML template to angular 8 component . When I Put the Complete HTML in Index page and outside <app-root></app-root> Everything works fine. But when i put it inside <app-root></app-root> in Index page in this case color appears but word does not appears . On Inspecting i can see the words are there.
I am sharing AppComponent and Index file code. If you need any thing else i provide You. Please guide me where i am doing wrong . I want to create seperate header ,Content, footer component from HTML template in angular
******** AppComonent.html *************
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
<div class="container-fluid px-md-4 ">
<a class="navbar-brand" href="index.html">Skillhunt</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a routerLink="/index" class="nav-link">Home</a></li>
<li class="nav-item"><a routerLink="/jobs" class="nav-link">Browse Jobs</a></li>
<li class="nav-item"><a routerLink="/candidates" class="nav-link">Canditates</a></li>
<li class="nav-item"><a routerLink="/blog" class="nav-link">Blog</a></li>
<li class="nav-item"><a routerLink="/contact" class="nav-link">Contact</a></li>
<li class="nav-item cta mr-md-1"><a routerLink="/postjobs" class="nav-link">Post a Job</a></li>
<li class="nav-item cta cta-colored"><a routerLink="/login" class="nav-link">Login/Sign Up</a></li>
</ul>
</div>
</div>
</nav>
<!-- END nav -->
<div class="hero-wrap img" style="background-image: url(assets/images/bg_1.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="row d-md-flex no-gutters slider-text align-items-center justify-content-center">
<div class="col-md-10 d-flex align-items-center ftco-animate">
<div class="text text-center pt-5 mt-md-5">
<p class="mb-4">Find Job, Employment, and Career Opportunities</p>
<h1 class="mb-5">The Eassiest Way to Get Your New Job</h1>
<div class="ftco-counter ftco-no-pt ftco-no-pb">
<div class="row">
<div class="col-md-4 d-flex justify-content-center counter-wrap ftco-animate">
<div class="block-18">
<div class="text d-flex">
<div class="icon mr-2">
<span class="flaticon-worldwide"></span>
</div>
<div class="desc text-left">
<strong class="number" data-number="46">0</strong>
<span>Countries</span>
</div>
</div>
</div>
</div>
<div class="col-md-4 d-flex justify-content-center counter-wrap ftco-animate">
<div class="block-18 text-center">
<div class="text d-flex">
<div class="icon mr-2">
<span class="flaticon-visitor"></span>
</div>
<div class="desc text-left">
<strong class="number" data-number="450">0</strong>
<span>Companies</span>
</div>
</div>
</div>
</div>
<div class="col-md-4 d-flex justify-content-center counter-wrap ftco-animate">
<div class="block-18 text-center">
<div class="text d-flex">
<div class="icon mr-2">
<span class="flaticon-resume"></span>
</div>
<div class="desc text-left">
<strong class="number" data-number="80000">0</strong>
<span>Active Employees</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ftco-search my-md-5">
<div class="row">
<div class="col-md-12 nav-link-wrap">
<div class="nav nav-pills text-center" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active mr-md-1" id="v-pills-1-tab" data-toggle="pill" href="#v-pills-1" role="tab" aria-controls="v-pills-1" aria-selected="true">Find a Job</a>
<a class="nav-link" id="v-pills-2-tab" data-toggle="pill" href="#v-pills-2" role="tab" aria-controls="v-pills-2" aria-selected="false">Find a Candidate</a>
</div>
</div>
<div class="col-md-12 tab-wrap">
<div class="tab-content p-4" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-1" role="tabpanel" aria-labelledby="v-pills-nextgen-tab">
<form action="#" class="search-job">
<div class="row no-gutters">
<div class="col-md mr-md-2">
<div class="form-group">
<div class="form-field">
<div class="icon"><span class="icon-briefcase"></span></div>
<input type="text" class="form-control" placeholder="eg. Garphic. Web Developer">
</div>
</div>
</div>
<div class="col-md mr-md-2">
<div class="form-group">
<div class="form-field">
<div class="select-wrap">
<div class="icon"><span class="ion-ios-arrow-down"></span></div>
<select name="" id="" class="form-control">
<option value="">Category</option>
<option value="">Full Time</option>
<option value="">Part Time</option>
<option value="">Freelance</option>
<option value="">Internship</option>
<option value="">Temporary</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md mr-md-2">
<div class="form-group">
<div class="form-field">
<div class="icon"><span class="icon-map-marker"></span></div>
<input type="text" class="form-control" placeholder="Location">
</div>
</div>
</div>
<div class="col-md">
<div class="form-group">
<div class="form-field">
<button type="submit" class="form-control btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="v-pills-2" role="tabpanel" aria-labelledby="v-pills-performance-tab">
<form action="#" class="search-job">
<div class="row">
<div class="col-md">
<div class="form-group">
<div class="form-field">
<div class="icon"><span class="icon-user"></span></div>
<input type="text" class="form-control" placeholder="eg. Adam Scott">
</div>
</div>
</div>
<div class="col-md">
<div class="form-group">
<div class="form-field">
<div class="select-wrap">
<div class="icon"><span class="ion-ios-arrow-down"></span></div>
<select name="" id="" class="form-control">
<option value="">Category</option>
<option value="">Full Time</option>
<option value="">Part Time</option>
<option value="">Freelance</option>
<option value="">Internship</option>
<option value="">Temporary</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md">
<div class="form-group">
<div class="form-field">
<div class="icon"><span class="icon-map-marker"></span></div>
<input type="text" class="form-control" placeholder="Location">
</div>
</div>
</div>
<div class="col-md">
<div class="form-group">
<div class="form-field">
<button type="submit" class="form-control btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="ftco-section ftco-no-pt ftco-no-pb">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="category-wrap">
<div class="row no-gutters">
<div class="col-md-2">
<div class="top-category text-center no-border-left">
<h3><a href="#">Website & Software</a></h3>
<span class="icon flaticon-contact"></span>
<p><span class="number">143</span> <span>Open position</span></p>
</div>
</div>
<div class="col-md-2">
<div class="top-category text-center active">
<h3><a href="#">Education & Training</a></h3>
<span class="icon flaticon-mortarboard"></span>
<p><span class="number">143</span> <span>Open position</span></p>
</div>
</div>
<div class="col-md-2">
<div class="top-category text-center">
<h3><a href="#">Graphic & UI/UX Design</a></h3>
<span class="icon flaticon-idea"></span>
<p><span class="number">143</span> <span>Open position</span></p>
</div>
</div>
<div class="col-md-2">
<div class="top-category text-center">
<h3><a href="#">Accounting & Finance</a></h3>
<span class="icon flaticon-accounting"></span>
<p><span class="number">143</span> <span>Open position</span></p>
</div>
</div>
<div class="col-md-2">
<div class="top-category text-center">
<h3><a href="#">Restaurant & Food</a></h3>
<span class="icon flaticon-dish"></span>
<p><span class="number">143</span> <span>Open position</span></p>
</div>
</div>
<div class="col-md-2">
<div class="top-category text-center">
<h3><a href="#">Health & Hospital</a></h3>
<span class="icon flaticon-stethoscope"></span>
<p><span class="number">143</span> <span>Open position</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ftco-section">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-md-7 heading-section text-center ftco-animate">
<span class="subheading">Job Categories</span>
<h2 class="mb-0">Top Categories</h2>
</div>
</div>
<div class="row">
<div class="col-md-3 ftco-animate">
<ul class="category text-center">
<li><a href="#">Web Development <br><span class="number">354</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
<li><a href="#">Graphic Designer <br><span class="number">143</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
<li><a href="#">Multimedia <br><span class="number">100</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
<li><a href="#">Advertising <br><span class="number">90</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
</ul>
</div>
<div class="col-md-3 ftco-animate">
<ul class="category text-center">
<li><a href="#">Education & Training <br><span class="number">100</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
<li><a href="#">English <br><span class="number">200</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
<li><a href="#">Social Media <br><span class="number">300</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
<li><a href="#">Writing <br><span class="number">150</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
</ul>
</div>
<div class="col-md-3 ftco-animate">
<ul class="category text-center">
<li><a href="#">PHP Programming <br><span class="number">400</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
<li><a href="#">Project Management <br><span class="number">100</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
<li><a href="#">Finance Management <br><span class="number">222</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
<li><a href="#">Office & Admin <br><span class="number">123</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
</ul>
</div>
<div class="col-md-3 ftco-animate">
<ul class="category text-center">
<li><a href="#">Web Designer <br><span class="number">324</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
<li><a href="#">Customer Service <br><span class="number">564</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
<li><a href="#">Marketing & Sales <br><span class="number">234</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
<li><a href="#">Software Development <br><span class="number">425</span> <span>Open position</span><i class="ion-ios-arrow-forward"></i></a></li>
</ul>
</div>
</div>
</div>
</section>
<section class="ftco-section services-section">
<div class="container">
<div class="row d-flex">
<div class="col-md-3 d-flex align-self-stretch ftco-animate">
<div class="media block-6 services d-block">
<div class="icon"><span class="flaticon-resume"></span></div>
<div class="media-body">
<h3 class="heading mb-3">Search Millions of Jobs</h3>
<p>A small river named Duden flows by their place and supplies.</p>
</div>
</div>
</div>
<div class="col-md-3 d-flex align-self-stretch ftco-animate">
<div class="media block-6 services d-block">
<div class="icon"><span class="flaticon-team"></span></div>
<div class="media-body">
<h3 class="heading mb-3">Easy To Manage Jobs</h3>
<p>A small river named Duden flows by their place and supplies.</p>
</div>
</div>
</div>
<div class="col-md-3 d-flex align-self-stretch ftco-animate">
<div class="media block-6 services d-block">
<div class="icon"><span class="flaticon-career"></span></div>
<div class="media-body">
<h3 class="heading mb-3">Top Careers</h3>
<p>A small river named Duden flows by their place and supplies.</p>
</div>
</div>
</div>
<div class="col-md-3 d-flex align-self-stretch ftco-animate">
<div class="media block-6 services d-block">
<div class="icon"><span class="flaticon-employees"></span></div>
<div class="media-body">
<h3 class="heading mb-3">Search Expert Candidates</h3>
<p>A small river named Duden flows by their place and supplies.</p>
</div>
</div>
</div>
</div>
</div>
</section>
******* Index Page HTML **************
<!doctype html>
<html lang="en">
<head>
<title>Skillhunt - Free Bootstrap 4 Template by Colorlib</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/aos.css">
<link rel="stylesheet" href="assets/css/ionicons.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-datepicker.css">
<link rel="stylesheet" href="assets/css/jquery.timepicker.css">
<link rel="stylesheet" href="assets/css/flaticon.css">
<link rel="stylesheet" href="assets/css/icomoon.css">
<link rel="stylesheet" href="assets/css/style.css">
<base href="/">
</head>
<body>
<app-root></app-root>
</body>
</html>
Angular is full featured SPA framework,with the help of which single page application is created. In the SPA whole page is not reloaded every time,every time view will be change
So when you load the application for the first time not all the pages from the server will be rendered..Its only index.html that loads when you load the application.Since only single page is loaded it is called as SPA
You have to create three different components and on each component.html you add your html:
1.header-component
2.content-cmponent
3.footer-component
You can create each component with this command
ng g c header
When you build your components go to app-component.html and add these components like this
<app-header></app-header>
<app-content></app-content>
<app-footer></app-footer>
Look this working example
If you using routing you have to do this:
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
Your content should be the component you redirect from routing!
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ContentComponent } from './content/content.component';
const routes: Routes = [
{
path: '',
component: ContentComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }