title: Angular - detect active route in ngIf
body: <p>I want to display a different markup for active and inactive menu items so that active menu item doesn't include <code>a</code> tag:</p>
  
  <pre><code>&lt;li&gt;
      &lt;a routerLink="/abc"&gt;Inactive&lt;/a&gt;
  &lt;/li&gt;    
  &lt;li&gt;Active&lt;/li&gt;
  </code></pre>
  
  <p>The <code>routerLinkActive</code> directive doesn't help here since it can only add some class for active route but not to use a different markup. I understand that I can inject <code>Router</code> to my component and use something like this</p>
  
  <pre><code>&lt;li&gt;
      &lt;ng-container *ngIf="router.isActive('/abc')"&gt;Active&lt;/ng-container&gt;
      &lt;a *ngIf="!router.isActive('/abc')" routerLink="/abc"&gt;Inactive&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>but is there a better built-in solution for this case?</p>