Angular 2: Multiple layout files using interpolation

Question

I'm building an Angular 2 app and need two layout files. One for the logged out users... (Login/Register views etc) and one for the logged in users to see the actual app itself. How can this be achieved with Angular 2?

Currently I have an app.component.html that simply has

<main-navbar></main-navbar>
<router-outlet></router-outlet>

But what I need to do is something along the lines of:

<div [ngSwitch]="layout">

  <template [ngSwitchCase]="panelLayout">
      /* output all the html layout elements for the logged out views */
      <router-outlet></router-outlet>
  <template>

  <template [ngSwitchCase]="appLayout">
     /* output all the html elements for the in logged in/app views */
     <router-outlet></router-outlet>
  </template>

</div>

But I have no idea where or how to set the layout variable.

I'm presuming this variable would best be set inside the main view component... or is there a better way to do this?

Answer 1

I worked out what I was trying to achieve by using transclusion... as far as I can see this isn't mentioned anywhere in the official docs!

It's simply a case of using <ng-content></ng-content> in the layout files where the main content for each layout needs to go.

// eg: app-layout.html
<app-header></app-header>
<app-navbar></app-navbar>
// content using this layout will appear below
<ng-content></ng-content>
<app-footer></app-footer>

Then after importing and including in directives use the layout it in a view like

// eg: dashboard.html
<app-layout>
  <h1>Hello {{user}}!</h1>
</app-layout>

Hope this helps someone trying to achieve the same thing