All geek questions in one place

How to display common default headers and footers in angular 2?

I have common header components and footer components. A list of countries is uploaded to the home page. whenever you click on a country. the page will load and display the text Loading... and then display the header and footer. but I want to show the header and footer by default, without waiting for the page to load completely. My code is here.

application-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() { } }
+11
source share
4 answers

I did a basic demo, given your requirements:

General header and footer, you can make changes and add API to it according to your needs.

 <app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer>

Check out this Plunker: https://plnkr.co/edit/aMLa3p00sLWka0pn5UNT

+11
source

You can use two times in the terminal:

 ng generate component header ng generate component footer

Then, 2 app.component.html must be included in the main HTML application file (i.e. app.component.html ):

 <app-header></app-header> <app-footer></app-footer>

this is the first thing to do.

Then you should fill in your templates:

  • header.component.html and style in header.component.css
  • footer.component.html and style at footer.component.css
+6
source

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

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

+1
source

In this case, replace the code as follows:

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 { }
0
source

Source: https://habr.com/ru/post/1267077/

More articles:


All Articles