Need to do correct way of doing nested routes in angular so that respective component view will update

Question

app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { BreadcrumbComponent } from './main-layout/breadcrumb/breadcrumb.component';
import { HeaderComponent } from './main-layout/header/header.component';
import { HomeComponent } from './main-layout/home/home.component';
import { SidenavComponent } from './main-layout/sidenav/sidenav.component';
import { AppInfoComponent } from './mobile-cms/app-info/app-info.component';
import { CreateAppComponent } from './mobile-cms/create-app/create-app.component';
import { CreateNewsComponent } from './mobile-cms/create-news/create-news.component';
import { EditAppComponent } from './mobile-cms/edit-app/edit-app.component';
import { EditNewsComponent } from './mobile-cms/edit-news/edit-news.component';

export const APP_ROUTES: Routes = [
  {
    path: '',
    redirectTo: '/home/app-info',
    pathMatch: 'full',
  },
  { path: 'home', redirectTo: '/home/app-info', pathMatch: 'full' },
  {
    path: 'home', component: HomeComponent,
    data: {
      breadcrumb: 'Home'
    },
    children: [
      { path: 'create-app', component: CreateAppComponent,
      data: {
        breadcrumb: 'Create App'
      },
      },
      {
        path: 'app-info', component: AppInfoComponent,
        data: {
          breadcrumb: 'List App'
        },
      },
      {
        path: 'edit-app',
        component: EditAppComponent,

        children: [
          {
            path: 'create-news',
            component: CreateNewsComponent,
            data: {
              breadcrumb: 'Create News'
            }
          },
          {
            path: 'edit-news',
            component: EditNewsComponent,
            data: {
              breadcrumb: 'Edit News'
            }
          },
        ],
        data: {
          breadcrumb: 'Edit App',
        },
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(APP_ROUTES,
    {
      preloadingStrategy: PreloadAllModules,
      useHash: true
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I need to navigate to edit-news and create-news path for that i used router.navigate()

edit-app.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-edit-app',
  templateUrl: './edit-app.component.html',
  styleUrls: ['./edit-app.component.scss'],
})
export class EditAppComponent implements OnInit, AfterViewInit {
 constructor(private router: Router){
 }
  ngOnInit(): void {

  }
  ngAfterViewInit(): void {

  }
      editNewsById() {
    this.router.navigate(['home/edit-app/edit-news'])}

      addNews() {
    this.router.navigate(['home/edit-app/create-news'])
  }
}

But when i click on Add New button or edit icon the URL is updating in the URL bar but view is not updating for create news and edit news by staying in the edit-app page only

Answer 1

since you want to just go to child components. its a bit easier yo use the relativeTo option

 constructor(private router: Router, private route: ActivatedRoute){}

editNewsById() {
    this.router.navigate(['edit-news'], {relativeTo: this.route})}

addNews() {
    this.router.navigate(['create-news'], {relativeTo: this.route })
}