I am new to Angular 2 so this may be an obvious question.

I want to navigate to a user settings page where the navigation is a sidebar instead of a menu in the header. To do this, I figure I somehow need to navigate to a different root component (not app.component). How is this best solved in Angular?

Below you see what I mean with having the <app-header></app-header> in the app.component.html, which renders a navigation bar at the top of the page rather than on the left hand side.

app.component.html

  <app-header></app-header>

  <router-outlet></router-outlet>

  <app-footer></app-footer>

app.component.ts

import { Component, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '@core/services/auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  // encapsulation: ViewEncapsulation.None
})
export class AppComponent {

  constructor(public authService: AuthService, private router: Router) {}

}

CodePudding user response：

The app.component is gonna be linked always with your app.module, but doesn't need to be the one where u create the whole layout.

You might want to leave it kinda empty with just a <router-outlet></router-outlet> piece on your HTML, and create then different shell/layouts depending on the route.

Think about that the app.component it is going to be needed by the index.html file to reference your root component, but doesn't strictly need to contain any kind of layout. Then u can leverage the layout to child components.