CODEWITHSUNDEEP
angular
Amit Saxena
Amit Saxena

Reputation: 216

Router-outlet and footer in Angular 2

I am new to Angular. I am creating an application which will have two sections. The first section will load depending on the route. The second second will be a footer which will be same in all views.

index.html

<body>
<app-root>Loading...</app-root>
</body>

app-routing.module.ts

{ path: '',  component: HomeComponent }

app.component.ts

import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
}

app.component.html

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

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

home.component.ts

@Component({
selector: 'app-home',
templateUrl: './home.component.html'
})
export class HomeComponent { }

home.component.html

<div>
<p>Home page will come here</p>
</div>

footer.component.ts

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

@Component({
selector: 'app-footer',
templateUrl: './footer.component.html'
})

export class FooterComponent {}

footer.component.html

<p>Footer will come here</p>

The screen displays this

Footer will come here

Home page will come here

I expect the router-outlet to render the HomeComponent first. Then, the app-footer component should be loaded. But, its being rendered in the opposite order.

What can I do to make them render in the correct order?

Upvotes: 0

Views: 3625

Answers (1)

Gourav Bhatia
Gourav Bhatia

Reputation: 196

You can check at https://github.com/g7bhatia/stackexample this only app folder content and it is printing as expected.

Upvotes: 1

Related Questions