How do I make an inner child routes to get the routerLinkActive

Question

I have an angular 6 application that has a header component. One of the links in that header contains another 4 components. It means that when I click on that link the first component is loaded and the route is /steps/step-one (the route of the home page and for other pages is without the /steps/... The steps component contains the 4 components and the navigation is with *ngIf.

I use routerLinkActive to show the user the active page. When the user click on the link that contains the 4 components he can see that he is on steps page and the route in the URL is /steps/step-one. But on that page there is a button that makes the navigation to /steps/step-two and then the active link disappeared.

What can I do to fix that issue?

app-steps.ts:

 <app-step-one
      *ngIf="router.url === '/steps/step-one'"
      ngFor="let cantinaData of cantinaDatas"
      [depositData]="cantinaData">
    </app-step-one>

    <app-step-two
      *ngIf="router.url === '/steps/step-two'"
      [ngClass]="{'active': 'router.url === /steps/step-two'}"
      ngFor="let cantinaData of cantinaDatas"
      [depositData]="cantinaData">
    </app-step-two>

    <app-step-three
      *ngIf="router.url === '/steps/step-three'"
      ngFor="let cantinaData of cantinaDatas"
      [depositData]="cantinaData">
    </app-step-three>

    <app-success
    *ngIf="router.url === '/steps/success'"
      ngFor="let cantinaData of cantinaDatas"
      [depositData]="cantinaData">
    </app-success>

possible duplicate https://stackoverflow.com/questions/37196882/how-do-i-navigate-to-a-parent-route-from-a-child-route/38810729#38810729 — ravi, Jan 24 '19 at 15:19

score 0 · Answer 1 · answered Jan 24 '19 at 17:29

Welcome to stack overflow!

Consider removing the above code and replacing it with:

<router-outlet></router-outlet>

Then displaying each of your components within that router outlet. Your components then become routed components instead of child components.

See the docs for more information: https://angular.io/guide/router#router-outlet

How do I make an inner child routes to get the routerLinkActive

1 Answers1