title: Change Angular router-outlet css depending on housed component?
body: <p>So I have a router-outlet that I'm using to switch between components on the side of another component. I want to be able to change the outlet width depending on the housed component. Currently I'm using a shared service to determine that:</p>
  
  <pre><code>&lt;div class="service.widthType"&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In between components, I'm changing the shared service properties to determine the class and thereby the width:</p>
  
  <pre><code>ngOnInit() {
    this.service.widthType = "small" // Or "medium" or "large" depending on the component
  }
  </code></pre>
  
  <p>Is this considered good practice or is there a better way to do this?</p>
  
  <p>edit: correcting code</p>