title: Accessing RouterLinkActive in a nested component using Angular 6
body: <p>I have a list-group defined as a list of <em>recipe-items</em>. I'm using the child routing in order to display a description of the item whenever the user clicks on a list element. So far the click event and the routing are working but <strong>I want to mark the clicked item as active</strong>. </p>
  
  <p><kbd>recipe-list.component.html</kbd>
  </p>
  
  <pre><code>&lt;app-recipe-item 
    *ngFor="let recipeEl of recipes; let i = index" 
    [recipe]="recipeEl"
    [routerLink]="i"
    style="cursor: pointer;"
    &gt;
  &lt;/app-recipe-item&gt;
  </code></pre>
  
  <p>In order to do it I'm trying to use the <a href="https://angular.io/api/router/RouterLinkActive" rel="nofollow noreferrer"><em>routerLinkActive</em></a> directive within my nested <code>RecipeItemComponent</code> but it looks like the directive is out of scope for the nested component.</p>
  
  <p><kbd>recipe-item.component.html</kbd>
  </p>
  
  <pre><code>&lt;div class="list-group"&gt;
    &lt;a 
      class="list-group-item list-group-item-action d-flex justify-content-between align-items-start"
      routerLinkActive="active"
      &gt;
       TO BE MARKED AS ACTIVE WHEN CLICKED
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What am I missing? Even using a <em>localRef</em> it's impossible to retrieve its value in a nested component. </p>