How to display common header and footer by default in angular 2?

Question

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() {             
               }        
  }

That should be the default behavior. Please try if this issue gets fixed if you use `imports: [RouterModule.forRoot(myRoutes, {useHash: true})]` — Günter Zöchbauer, Apr 24 '17 at 06:08
Hard to tell, because this should just work. Can you reproduce in a Plunker? — Günter Zöchbauer, Apr 24 '17 at 06:14
@GünterZöchbauer, see this plunker http://plnkr.co/edit/P1jR4cj4m2yiP2NoAHs5?p=preview. There is no error. but page not loading. — Vel, Apr 24 '17 at 06:32
You should start with the Plunker template provided by Plunker `New > Angular`. — Günter Zöchbauer, Apr 24 '17 at 06:34
@GünterZöchbauer, could please check http://plnkr.co/edit/PTnZWf6W3NlMnY3fwSWS? — Vel, Apr 24 '17 at 06:51
It doesn't do anything. You should move the files into the `src` folder. Just double click on the file name and prefix them with `src/` — Günter Zöchbauer, Apr 24 '17 at 06:53

score 23 · Accepted Answer · answered May 04 '17 at 18:20

23

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

answered May 04 '17 at 18:20

AmanDeepSharma

2,138
4
20
34

How do I pass parameters from components "below" my root component to the footer and header? – Azimuth Nov 06 '17 at 09:44
@Azimuth Could you please elaborate what exactly you want to do ? – AmanDeepSharma Nov 08 '17 at 09:58
1

I didn't think it would be this simple! Nice, thanks! – blueprintchris Feb 19 '18 at 14:16
@aman: sir how to manage via session,we have show different header if user is login and logout case? – Kapil Soni Jun 04 '19 at 15:20
I feel just to show how it is done, the example snippet above is suffice BUT if do consider how you display 404 component/page and especially if your 404 doesn't include header and footer (which is most of the case) then you need to re-think your component architecture – Muhammad Ali Mansoor Feb 26 '20 at 01:17
Is there a way to hide them on certain pages? I have a couple of pages where I don't need a header and footer? – Ray Jan 22 '21 at 21:07

score 8 · Answer 2 · edited Jan 31 '19 at 16:20

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

score 3 · Answer 3 · answered Apr 24 '17 at 06:28

3

From your description of the current behavior, it sounds like you are using standard html-style links, instead of Angular's RouterLink.

See the documentation at https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html

answered Apr 24 '17 at 06:28

GreyBeardedGeek

29,460
2
47
67

Vivek Doshi · Answer 4 · 2017-04-24T08:18:49.607

0

In that case replace your code with this :

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>
       <app-header></app-header>
       <my-app>Loading...</my-app>
       <app-footer></app-footer>
    </body>
</html>

app.component.ts

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

    @Component({
      moduleId: module.id,
      selector: 'my-app',
      template: `
        <router-outlet></router-outlet>
      `, 
    })
    export class AppComponent { }

edited Apr 24 '17 at 08:18

answered Apr 24 '17 at 07:08

Vivek Doshi

56,649
12
110
122

still working same. header and footer is displaying double times. – Vel Apr 24 '17 at 07:12
Will you please post HomepageComponent – Vivek Doshi Apr 24 '17 at 07:17
using selector: 'my-app', for both component ? – Vivek Doshi Apr 24 '17 at 07:21
I used like that. I dont know how to use in homepage? – Vel Apr 24 '17 at 07:23
I tries with selector: 'homepage', but no luck – Vel Apr 24 '17 at 07:26
header and footer not loading in all page – Vel Apr 24 '17 at 08:29
will you please show also module file ? and please set js fiddle if possible. – Vivek Doshi Apr 24 '17 at 08:30

score 0 · Answer 5 · answered Dec 05 '19 at 06:01

this is the way I have followed, you can load all other pages in the router outlet

<div id="wrapper" style="height: 100vh;">

<!-- Sidebar -->
<app-sidebar [isToggle]="true"></app-sidebar>
<!-- End of Sidebar -->

<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
    <!-- Main Content -->
    <div id="content">
        <!-- Topbar -->
        <app-header></app-header>
        <!-- End of Topbar -->
        <!-- Begin Page Content -->
        <div class="container-fluid">
            <router-outlet></router-outlet>
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- End of Main Content -->
    <!-- Footer -->
    <app-footer></app-footer>
    <!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->

How to display common header and footer by default in angular 2?

5 Answers5

Linked