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

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:

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

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

Related