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

Asked 24/4, 2017 at 5:52 Answered 5/12, 2019 at 6:1

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

Weinrich answered 24/4, 2017 at 5:52 Comment(7)

That should be the default behavior. Please try if this issue gets fixed if you use imports: [RouterModule.forRoot(myRoutes, {useHash: true})] – Keyboard 24/4, 2017 at 6:8

@GünterZöchbauer, not working. – Weinrich 24/4, 2017 at 6:13

Hard to tell, because this should just work. Can you reproduce in a Plunker? – Keyboard 24/4, 2017 at 6:14

@GünterZöchbauer, see this plunker plnkr.co/edit/P1jR4cj4m2yiP2NoAHs5?p=preview. There is no error. but page not loading. – Weinrich 24/4, 2017 at 6:32

You should start with the Plunker template provided by Plunker New > Angular. – Keyboard 24/4, 2017 at 6:34

@GünterZöchbauer, could please check plnkr.co/edit/PTnZWf6W3NlMnY3fwSWS? – Weinrich 24/4, 2017 at 6: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/ – Keyboard 24/4, 2017 at 6:53

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

Woolery answered 4/5, 2017 at 18:20 Comment(6)

How do I pass parameters from components "below" my root component to the footer and header? – Strafford 6/11, 2017 at 9:44

@Strafford Could you please elaborate what exactly you want to do ? – Woolery 8/11, 2017 at 9:58

I didn't think it would be this simple! Nice, thanks! – Corney 19/2, 2018 at 14:16

@aman: sir how to manage via session,we have show different header if user is login and logout case? – Alleviate 4/6, 2019 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 – Evangelical 26/2, 2020 at 1: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? – Carswell 22/1, 2021 at 21:7

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

Chelyabinsk answered 5/9, 2017 at 6:9 Comment(0)

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

Reality answered 24/4, 2017 at 6:28 Comment(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 { }

Juvenilia answered 24/4, 2017 at 7:8 Comment(7)

still working same. header and footer is displaying double times. – Weinrich 24/4, 2017 at 7:12

Will you please post HomepageComponent – Juvenilia 24/4, 2017 at 7:17

using selector: 'my-app', for both component ? – Juvenilia 24/4, 2017 at 7:21

I used like that. I dont know how to use in homepage? – Weinrich 24/4, 2017 at 7:23

I tries with selector: 'homepage', but no luck – Weinrich 24/4, 2017 at 7:26

header and footer not loading in all page – Weinrich 24/4, 2017 at 8:29

will you please show also module file ? and please set js fiddle if possible. – Juvenilia 24/4, 2017 at 8:30

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 -->

Lianna answered 5/12, 2019 at 6:1 Comment(1)

question was asked 2 years ago. – Weinrich 5/12, 2019 at 7:0

Recommended topics

Hot tags