separate layout navigation in angular 2 asp.net core

Question

I have a main layout which has header body and footer. In some pages I don't want to show the header just the body and the footer.

I have gone through this answer which I tried to implement but I was unable to figure out how to do it.

Here is my code:

app.component.ts

import { Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
    selector: 'main-app',
    template: `<router-outlet name="header"></router-outlet>
                <router-outlet name="navbar"></router-outlet>
                <router-outlet></router-outlet>
                <router-outlet name="footer"></router-outlet>`
})
export class AppComponent { }

Footer.component.ts

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

@Component({
    selector: 'Footer-app',
    templateUrl: '<p>Copy rights emakitri 2017</p>'
})
export class FooterComponent {
    constructor() {
        console.log("test");
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { HttpModule, JsonpModule } from '@angular/http';
import { ModuleWithProviders } from '@angular/core';
import { AppComponent} from "./app.component";
import { EqualValidator } from "./Validation/equal.validator.directive";
import { LoginComponent } from "./Components/login.Component";
import { HomeComponent } from "./Components/home.component";
import { DashBoardComponent } from "./Components/dashBoard.Component";
import { FooterComponent } from "./Components/footer.Component";

const appRoutes: Routes = [
    { path: '', redirectTo: 'Home/Index', pathMatch: 'full' },
    { path: 'Account/Login', component: LoginComponent },
    { path: 'Home/Index', component: HomeComponent,children: [
        {path: '', component: FooterComponent , outlet: 'footer'}
        ] },
    { path: 'DashBoard/Index', component: DashBoardComponent}
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);


@NgModule({
    imports: [BrowserModule, FormsModule, HttpModule, routing],
    declarations: [AppComponent, LoginComponent, HomeComponent, DashBoardComponent, EqualValidator,FooterComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

When I navigate to Home/Index the footer container doesn't appear. What am I doing wrong? Do I have to import something for childr routing?

YairTawil · Answer 1 · 2017-01-08T07:38:55.707

0

'footer' is child of 'Home/Index',

so you need:

<router-outlet name="footer"></router-outlet>

to be in HomeComponent template

Example of what you trying to do:

https://plnkr.co/edit/sgGDpti43GPM5cHntPpu?p=preview

Good luck ! :)

edited Jan 08 '17 at 07:38

answered Jan 08 '17 at 07:32

YairTawil

3,961
1
22
20

I am getting error with child route everything is working fine. Please can you tell me how can I resolve this issue – San Jaisy Jan 08 '17 at 11:39
Do you have in your "index.html" at the beginning of the tag? – YairTawil Jan 08 '17 at 11:47
Yes I have ....... its a problem with the children ' '.Do I have to import something for the child route?? – San Jaisy Jan 09 '17 at 00:37
the error is on this line RouterModule.forRoot(appRoutes);. However if I use RouterModule.forChild(appRoutes) the error will go. But I cant see the footer – San Jaisy Jan 09 '17 at 02:09
here is the complete code http://stackoverflow.com/questions/41518475/cannot-match-any-routes-angular-2-asp-net-core – San Jaisy Jan 09 '17 at 02:22

score 0 · Answer 2 · answered Jan 09 '17 at 05:05

Here is the working module

App.Module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Routes,RouterModule} from '@angular/router';
import { HttpModule, JsonpModule } from '@angular/http';
import { ModuleWithProviders } from '@angular/core';
import { AppComponent} from "./app.component";
import { EqualValidator } from "./Validation/equal.validator.directive";
import { LoginComponent } from "./Components/login.Component";
import { HomeComponent } from "./Components/home.component";
import { DashBoardComponent } from "./Components/dashBoard.Component";
import { FooterComponent } from "./Components/footer.Component";
import { NavComponent } from "./Components/nav.Component";


const appRoutes: Routes = [
    { path: '', redirectTo: 'Home/Index', pathMatch: 'full' },
    { path: 'DashBoard/Index', component: DashBoardComponent},
    { path: 'Account/Login', children: [
            {path: '', component: NavComponent, outlet: 'navbar'},
            {path: '', component: LoginComponent},
            {path: '', component: FooterComponent, outlet: 'footer'}
            ]},
    { path: 'Home/Index', children: [
            {path: '', component: NavComponent, outlet: 'navbar'},
            {path: '', component: HomeComponent},
            {path: '', component: FooterComponent, outlet: 'footer'}
            ]}
];



export const routing = RouterModule.forRoot(appRoutes);

@NgModule({
    imports: [BrowserModule, FormsModule, HttpModule,routing],
    declarations: [AppComponent, LoginComponent, HomeComponent, DashBoardComponent, EqualValidator,FooterComponent,NavComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

App.Component.ts

import { Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
    selector: 'main-app',
    template: `<router-outlet name="navbar"></router-outlet>
                <div class="container">
                <router-outlet></router-outlet>
                </div>
                <router-outlet name="footer"></router-outlet>`
})
export class AppComponent { }

separate layout navigation in angular 2 asp.net core

2 Answers2