title: Angular - Get router url before loading router
body: <p>I want to use my app as an iframe on other web pages. However, therefore I need a 'stripped' version of my app, where some features are disabled.</p>
  
  <p>Normally, I navigate with url/#/... For the iframe, it is url/#/iframe/... . They both navigate to the same pages, although some features are disabled in the latter.</p>
  
  <p>My problem is that I want to place a <code>div</code> around the <code>router-outlet</code> with a class depending on whether I'm in iframe-mode or not. At this moment, I can only think of checking </p>
  
  <pre><code>this.route.snapshot.url[0].path === 'iframe'
  </code></pre>
  
  <p>in the car.component.ts file, storing this value somewhere in app.service.ts as <code>appService.iframe</code> and then using this value in app.component.html.</p>
  
  <p>This, however, gives the following error:</p>
  
  <pre><code>ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'body1'. Current value: 'body2'.
  </code></pre>
  
  <p>Can I get the url before loading the router?</p>
  
  <p><strong>app.routes.ts file:</strong></p>
  
  <pre><code>// Route Configuration
  export const routes: Routes = [
    {path: '', component: CarList},
    {path: 'iframe', component: CarList},
    {path: 'iframe/:loket', component: Car},
    {path: ':loket', component: Car}
  ];
  
  // Export routes
  export const routing = RouterModule.forRoot(routes);
  </code></pre>
  
  <p><strong>app.component.html file:</strong></p>
  
  <pre><code> &lt;div class="container"&gt;
        &lt;div class="header"&gt;
          &lt;header&gt;&lt;/header&gt;
        &lt;/div&gt;  
        &lt;div [ngClass]="(!appService.iframe) ? 'body1': 'body2'"&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
        &lt;/div&gt;
        &lt;div class="footer"&gt;
          &lt;footer&gt;&lt;/footer&gt;
      &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>