I have common header components and footer components. countries list are loading on homepage. whenever click on the country. page will get reloaded and displaying text Loading... and then header and footer displaying. but I want to display the header and footer default without waiting for full page loaded. My code here.
app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomepageComponent,},
{ path: ':city', component: CountryDetailComponent },
{ path: ':city/:subscategory', component: ExploreListComponent },
{ path: ':city/:subscategory/:singleitem', component: DetailedPageComponent },
];
app.component.ts
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'my-app',
template: `
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
`,
})
export class AppComponent { }
header.component.ts
import { Component,Renderer } from '@angular/core';
import { Title } from '@angular/platform-browser';
@Component({
moduleId: module.id,
selector: 'app-header',
template: `header html script`,
})
export class HeaderComponent {
constructor(title: Title) { }
}
footer.component.ts
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-footer',
template: `comman footer html script`,
})
export class FooterComponent {
}
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
homepage.component.ts
@Component({
selector: 'my-app',
templateUrl: 'homepage.component.html',
styleUrls: ['homepage.component.css'],
providers: [ CountriesService]
})
export class HomepageComponent {
ngOnInit() {
}
}
See Question&Answers more detail:
os 
