Make Angular router parent not active when it children are active

Question

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.

Is there any way of preventing the parent anchor tag to get active when it children are?

Home.component

<ul class="nav navbar-nav">
   <li [routerLink]="'/home'" routerLinkActive="active">
       <a>Home</a>
   </li>
   <li [routerLink]="'create'" routerLinkActive="active">
       <a>Create</a>
    </li>
</ul>

app.routing

const appRoutes: Routes = [{
    path: "home", component: HomeComponent, children: [{
        path: "create", component: CreateComponent
    }]
}];

Current behaviour

Accessing /home (notice only home anchor tag is active):

Accessing /home/create (notice both anchor tags are active)

Wanted behaviour

Accessing /home (notice only home anchor tag is active):

Accessing /home/create (notice only create tag is active):

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?

Thanks a lot guys.

Answer 1

Add: [routerLinkActiveOptions]="{exact: true}"