title: Make Angular router parent not active when it children are active
body: <p>I have a navbar as a router, with two anchor tags, Home and Create, Create being a child of Home. I want to make the Create anchor tag active when it is selected, but the Home anchor also gets active as it is the parent of Create.</p>
  
  <p>Is there any way of preventing the parent anchor tag to get active when it children are?</p>
  
  <p><strong>Home.component</strong></p>
  
  <pre><code>&lt;ul class="nav navbar-nav"&gt;
     &lt;li [routerLink]="'/home'" routerLinkActive="active"&gt;
         &lt;a&gt;Home&lt;/a&gt;
     &lt;/li&gt;
     &lt;li [routerLink]="'create'" routerLinkActive="active"&gt;
         &lt;a&gt;Create&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>app.routing</strong></p>
  
  <pre><code>const appRoutes: Routes = [{
      path: "home", component: HomeComponent, children: [{
          path: "create", component: CreateComponent
      }]
  }];
  </code></pre>
  
  <p><strong>Current behaviour</strong></p>
  
  <p>Accessing /home (notice only home anchor tag is active): 
  <a href="https://i.stack.imgur.com/oQPgf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oQPgf.png" alt="enter image description here"></a></p>
  
  <p>Accessing /home/create (notice both anchor tags are active)<a href="https://i.stack.imgur.com/W752o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W752o.png" alt="enter image description here"></a></p>
  
  <p><strong>Wanted behaviour</strong></p>
  
  <p>Accessing /home (notice only home anchor tag is active): 
  <a href="https://i.stack.imgur.com/oQPgf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oQPgf.png" alt="enter image description here"></a></p>
  
  <p>Accessing /home/create (notice only create tag is active):<a href="https://i.stack.imgur.com/miKz0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/miKz0.png" alt="enter image description here"></a></p>
  
  <p>Am I missing something in the home component or is it a normal behaviour and I shouldn't use Create as a child of Home?</p>
  
  <p>Thanks a lot guys.</p>