Search code examples
angulartypescriptangular4-router

how to replace the old selector content in angular 4 or redirect it to full new page

I have an index page in Angular 4 and after the login, I want to replace the old page content or at least redirect it to the dashboard. On the index page there is something like about us and in the dashboard there is custom.

I already tried I think every thing on the internet like:

{ path: '', redirect To: '/dashboard', path Match: 'full' }
defaulter
Solution

  • I don't think you can "replace" the root selector. Rather you can change it to only contain a router outlet:

    app.component.html

    <router-outlet></router-outlet>

    Then anything you route to this router outlet can use the full page and replace any menu/navigation components.

    You can then have something like a shell component that has the desired menu.

    shell.component.html

    <mh-menu></mh-menu>

<div class='container'>
    <router-outlet></router-outlet>
</div>

    You could then replace this shell component with any other component with its own menu.

    I have an example here: https://github.com/DeborahK/MovieHunter-routing

    Here is a picture showing the app's router outlet and a shell component's router outlet:

    enter image description here