How to keep Angular Route nav fixed ? Angular Route redirecting to new page

Question

I am following the tutorial. I need to keep The nav bar fixed and neviagte like this example.

I have only two links. This is inside of one page.

Here what I have tried.

<nav>
    <a routerLink="/title" routerLinkActive="active">Titler</a>
    <a routerLink="/dist" routerLinkActive="active">Dist</a>
</nav>

<router-outlet></router-outlet>

and

HttpClientModule,
RouterModule.forRoot(Inner, {
    enableTracing: true
  }),
RouterModule.forChild([ HOME_ROUTE ]),

and the Route.ts is

import { Route, Routes } from '@angular/router';

export const HOME_ROUTE: Route = {
    path: '',
    component: HomeComponent,
    data: {
        authorities: [],
        pageTitle: 'home.title'
    }
};

export const Inner: Routes = [
    {path: 'title', component: TComponent},
    {path: 'dist', component: DComponent}
];

If I click to the Like it Redirect to new page . But like that Example I want to keep the nav in everypage and show the Content. What I am doing wrong ?

Answer 1

Your question is not clear enough, here is a stackblitz of the simplest routing example I can imagine. If the example doesn't answer your question, feel free to update it and use it in your question. (don't be scared of stackblitz, it's just an online IDE ^_^))