Menu
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() { } } 
947
I have made a basic demo keeping in mind your requirements:
Common header and footer, You can make changes and add APIs in it according to your need.
<app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer> Check out this Plunker: https://plnkr.co/edit/aMLa3p00sLWka0pn5UNT
89
you could use two times in the terminal:
ng generate component header ng generate component footer Then, in the main app file HTML (i.e. app.component.html) you must include the 2 tags:
<app-header></app-header> <app-footer></app-footer> this is the first thing to do.
Then you must populate your templates:
header.component.html and the styling in header.component.css footer.component.html and the styling in footer.component.css
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
