title: How to change html layout based on Route in Angular 8?
body: <p>This is my <code>app.module.ts</code> file (the imporant snippet only):</p>
  
  <pre><code>imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    ...
    RouterModule.forRoot([
  
      // basic
      { path: 'basic', component: StartComponent, data: { useBasicLayout: 'yes' } },
      { path: 'basic/workspace/:id', component: WorkspaceComponent },
  
      // full blown layout
      { path: '', component: StartComponent },
      { path: 'workspace/:id', component: WorkspaceComponent },
    ]).
  </code></pre>
  
  <p>What I want to accomplish is that if URL is like this: '<a href="http://example.com/basic" rel="nofollow noreferrer">http://example.com/basic</a>' the HTML shown is basic layout (I have defined components like <code>ribbon</code> and <code>ribbon-basic</code>).</p>
  
  <p>If I navigate just '<a href="http://example.com/" rel="nofollow noreferrer">http://example.com/</a>' the full blown HTML layout is shown.</p>
  
  <p>I tried with next code in <code>app.component.ts</code> because it's the first component that starts.</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { WorkspaceService } from './components/workspace/workspace.service';
  import { ActivatedRoute, Router } from '@angular/router';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  export class AppComponent {
  
    basicLayoutEnabled: boolean = false;
  
    constructor(
      private _wService: WorkspaceService,
      private _activatedRoute: ActivatedRoute,
      private _router: Router) {
  
      this._activatedRoute.data.subscribe(data =&gt; {
        console.log("Data parameters: " + data);
        // the data is empty here
        if (data.useBasicLayout == true) {
          this._wService.basicLayoutEnabled = true;
        }
      });
    }
  
    ngOnInit() {}    
    ngOnDestroy() {}
  }
  </code></pre>
  
  <p>And here is the view <code>app.component.html</code>:</p>
  
  <pre><code>&lt;div fxFlexFill fxLayout="column"&gt;
    &lt;div fxFlex="none"&gt;
      &lt;app-ribbon *ngIf="!basicLayoutEnabled"&gt;&lt;/app-ribbon&gt;
      &lt;app-ribbon-basic *ngIf="basicLayoutEnabled"&gt;&lt;/app-ribbon-basic&gt;
    &lt;/div&gt;
    &lt;div fxLayout="row" style="overflow: hidden; flex: auto;"&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;/div&gt;
    &lt;div fxFlex="none"&gt;
      &lt;app-status-bar fx&gt;&lt;/app-status-bar&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>