Different navbar at individual page angular2

Question

I have set same navbar for whole project in default app.component.html file but at certain page/component I need different one. What's the most efficient way to achieve it? Should I add navbar to each component?

Answer 1

Background

You want to show a different navigation bar on different component pages. This is not a problem at all. The most efficient way is arguable and we would all need more information about your project in order to answer that specifically. But I will show you the way I would do it.

Answer

I would create templates in my Angular2 project. THese templates would act as the gateways for certain pages based on the content that was being delivered on those pages. For example, if you have one page that needs to be secure and must be accessed after the user logs in. Then another page that is open to the public. You could control these two pages with two templates then make all of the pages children of those templates.

So in your case you need the navigation to be different. Let's solve that.

Example

Template directory

/templates/main.component.ts

@Component({
    selector: 'app-dashboard',
    templateUrl: './main.component.html'
})
export class MainComponent implements OnInit {

    constructor( private router: Router, private auth: Auth ) { }

    ngOnInit(): void { }
}

/templates/main.component.html

<header></header>
 <!-- Main Content Outlet Selector -->
        <router-outlet></router-outlet>
     <!-- End Main Content Outlet Selector -->
</footer></footer>

/templates/second.component.ts

@Component({
    selector: 'app-dashboard',
    templateUrl: './main.component.html'
})
export class SecondComponent implements OnInit {

    constructor( private router: Router, private auth: Auth ) { }

    ngOnInit(): void { }
}

/templates/second.component.html

<header></header>
     <!-- Main Content Outlet Selector -->
            <router-outlet></router-outlet>
         <!-- End Main Content Outlet Selector -->
    </footer></footer>

Routes

/app.routing.ts

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full', },
    { path: '', component: MainComponent, data: { title: 'Main Views' }, children: MAIN_ROUTES },
    { path: '', component: SecondComponent, data: { title: 'Second Views' }, children: SECOND_ROUTES }
];

Now that you have all that worked out you can create your child routes and pass the correct templates to which ever route and mother route you like.

main/routes.ts

export const MAIN_ROUTES: Routes = [
    { path: '', redirectTo: 'maybe home?', pathMatch: 'full' },
    { path: 'items', component: ItemsComponent },
]

secondary/routes.ts

export const SECOND_ROUTES: Routes = [
    { path: '', redirectTo: 'aPath', pathMatch: 'full' },
    { path: 'items', component: SomeComponent },
]

Finally

We can create a child component to add to the mama component!

/main/home.component.ts

@Component({
  templateUrl: './home.component.html',
})

export class HomeComponent {

  constructor() { }

}

/main/home.component.html

<div>cool stuff happens here because this is the main content area of the page now</div>

And of course all we have to do is make sure we add the home component to the correct child routes. So in this case MAIN_ROUTES

Just in case you are confused how these pages all output to the router-outlet, take a look at this,

app.component.ts

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

@Component({
    selector: 'body',
    template: '<router-outlet></router-outlet>'
})
export class AppComponent { 
}