title: Rendering two components with Angular Routing
body: <p>I am working on an <strong>Angular 6</strong> App, currently, and I want to change two components on a page by clicking on a certain route. Instead of creating a single component containing both, I would like to just change what actually changes (without having duplicate html tags and data).</p>
  
  <p>How can I do that?</p>
  
  <p>Here's some code.</p>
  
  <p><strong>Main Component HTML</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"&gt;
  
    &lt;div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom"&gt;
      &lt;h1 class="h2 text-primary"&gt;{{title}}&lt;/h1&gt;
  
      &lt;div class="btn-toolbar mb-2 mb-md-0"&gt;
        &lt;div class="btn-group mr-2"&gt;
          &lt;button class="btn btn-sm btn-outline-secondary"&gt;Esporta domanda client&lt;/button&gt;
          &lt;button class="btn btn-sm btn-outline-secondary"&gt;Esporta risposta server&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="row d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3"&gt;
        &lt;div class="col-6"&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
        &lt;/div&gt;
        &lt;div class="col-6"&gt;
          &lt;app-http-response&gt;&lt;/app-http-response&gt;
        &lt;/div&gt;
        &lt;hr/&gt;
      &lt;/div&gt;
      &lt;div class="row d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3"&gt;
        &lt;div class="col-12 sm-12 md-12 xs-12 lg-12"&gt;
          &lt;app-test-cases&gt;&lt;/app-test-cases&gt;
        &lt;/div&gt;
        &lt;hr/&gt;
      &lt;/div&gt;
      &lt;div class="row d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3"&gt;
        &lt;div class="col-12 sm-12 md-12 xs-12 lg-12"&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Main Component TypeScript</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class ProcessComponent implements OnInit {
    currentRoute: string;
    title: string;
  
    constructor(private router: Router) {
    }
  
    ngOnInit() {
      this.currentRoute = CurrentRoute.getCurrentRoute(this.router);
      this.title = this.currentRoute.charAt(1).toUpperCase() +
        this.currentRoute.substring(2, this.currentRoute.length)
          .replace('-', ' ');
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>App.module.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const appRoutes: Routes = [{
    path: '', redirectTo: 'processi', pathMatch: 'full'
  },
    {
      path: 'processi', component: HttpRequestProcessComponent
    },
    {
      path: 'regole', component: HttpRequestRuleComponent
    },
    {
      path: 'verifica-ordini', component: HttpRequestCheckOrderComponent
    },
    {
      path: 'prodotti-vendibili', component: HttpRequestSalableProductComponent
    }];</code></pre>
  </div>
  </div>
  </p>
  
  <p>For now I am rendering just one component, but, as you can see, I want to add a further component which will be rendered on the second <code>&lt;router-outlet&gt;</code> tag.</p>
  
  <p>Furthermore, the title is not updating properly on Route changes despite getting the <code>this.router.url</code>, but I think this is another story.</p>
  
  <p>Thank you in advance.</p>