title: Angular 2: Styling router-outlet to have width < 100%
body: <p>I'm building an Angular 2 app which would have a side nav bar for screens wider than 500, and a bottom nav bar for screens less wide than 500. For now I was trying to assign a 20% width to the side bar, 80% to app content.</p>
  
  <p>The problem that I have is that the router-outlet content (i.e. the actual app) takes up the full width of the page instead of just 80%. It seems to be ignoring any styling I try to give it. Are we not supposed to style router-outlet directly? Or perhaps there is a better way that I'm overlooking?</p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component, HostListener } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;div class="container-fluid"&gt;
        &lt;nav *ngIf="this.window.innerWidth &gt; 500"&gt;&lt;/nav&gt;
        &lt;router-outlet style="width:80%;float:right;"&gt;&lt;/router-outlet&gt;
        &lt;nav *ngIf="this.window.innerWidth &lt; 500"&gt;&lt;/nav&gt;
    `,
    styleUrls: ['app/app.component.css']
  })
  export class AppComponent {
    window = [];
  
    ngOnInit(): void {
      this.window.innerWidth = window.innerWidth;
    }
  
    @HostListener('window:resize', ['$event'])
    onResize(event) {
      this.window.innerWidth = event.target.innerWidth;
      console.log(this.window.innerWidth);
    }
  }
  </code></pre>