title: How to use the activated route's data DIRECTLY in the HTML template containing the RouterOutlet?
body: <p><em>This one took me a while to figure out, so I hope to save someone's time by sharing the solution in the SO's Q&amp;A way. Here it goes:</em></p>
  
  <h1>Goal</h1>
  
  <p>I have an Angular8 web application, where I use the <a href="https://angular.io/api/router/RouterModule" rel="noreferrer">RouterModule</a> to navigate between the components.</p>
  
  <p>Here is how my routes are defined:</p>
  
  <pre><code>const routes: Routes = [
      { path: 'moo', component: AppMooComponent, data: { title: 'Moo Section', desc: 'Moo is the first example component.' } },
      { path: 'boo', component: AppBooComponent, data: { title: 'Boo Section', desc: 'Boo is the second example component.' } },
      { path: 'foo', component: AppFooComponent, data: { title: 'Foo Section', desc: 'Foo is the third example component.' } },
      { path: '', redirectTo: 'moo', pathMatch: 'full' },
  ];
  </code></pre>
  
  <p>I would like to be able to use <code>data.title</code> and <code>data.desc</code> (or any defined data for that matter) in my HTML template in the following way:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a [routerLink]="['moo']"&gt;Moo&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a [routerLink]="['boo']"&gt;Boo&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a [routerLink]="['foo']"&gt;Foo&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;hr&gt;
  &lt;h1&gt;{{&lt;something&gt;.data.title}}&lt;/h1&gt;
  &lt;p&gt;{{&lt;something&gt;.data.desc}}&lt;/p&gt;
  &lt;hr&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <h1>Problem</h1>
  
  <p>Injecting <code>ActivatedRoute</code> to get the data does not work, because <code>ActivatedRoute</code> is:</p>
  
  <blockquote>
    <p><a href="https://angular.io/guide/router" rel="noreferrer">A service that is provided to each route component</a></p>
  </blockquote>
  
  <p>and the component, containing the <code>router-outlet</code> is not a route component.</p>
  
  <h1>Research</h1>
  
  <p>I have searched the site and found the following questions discussing a very similar problem:</p>
  
  <p><a href="https://stackoverflow.com/questions/43806188/how-can-i-access-an-activated-child-routes-data-from-the-parent-routes-compone">How can I access an activated child route&#39;s data from the parent route&#39;s component?</a></p>
  
  <p><a href="https://stackoverflow.com/questions/47581750/get-route-data-outside-the-router-outlet">Get route data outside the router outlet</a></p>
  
  <p><a href="https://stackoverflow.com/questions/41613750/access-activated-route-data-from-some-other-component">Access activated route data from some other component</a></p>
  
  <p><a href="https://stackoverflow.com/questions/38460470/accessing-route-data-in-root-component-route-data-is-empty">Accessing Route data in root component, route data is empty</a></p>
  
  <p><a href="https://stackoverflow.com/questions/45737375/angular-activatedroute-data-returns-an-empty-object">Angular ActivatedRoute data returns an empty object</a></p>
  
  <p>However, in my case the emphasize is on <strong>direct usage of the route's data in the HTML template</strong>, so neither of those possible solutions is suitable (as summarized in <a href="https://medium.com/@tomastrajan/how-to-get-route-path-parameters-in-non-routed-angular-components-32fc90d9cb52" rel="noreferrer">How To Get Route Path Parameters In Non-Routed Angular Components</a>):</p>
  
  <ul>
  <li>Moving the non-routed component inside of the routed component</li>
  <li>Using router navigation events</li>
  <li>Creating an additional service to hold the route path param state and make it available for all other interested components</li>
  </ul>
  
  <hr>
  
  <p>How to achieve that in the desired way?</p>