How to change route object data in angular

Question

I have the routes file as below

    const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    canActivate: [DashboardRoleGuard],
    children: [{
      path: 'admin',
      component: AdminDashboardComponent
      // canActivateChild: [RedirectGuard]
    }, {
      path: 'user',
      component: UserDashboardComponent
      // canActivateChild: [RedirectGuard]
    }],
    data: {
      expectedRole1: ["admin", "SiteAdmin", "OrgAdmin", "SuperAdmin"],
      expectedRole2: ["user", "NormalUser"],
      redirectTo: "",
      isManual: false
    }
  }]

in data section i have a flag isManual. so i want to change the value of flag. i have tried below code in route guard.

  canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

// this will be passed from the route config
// on the data property
const expectedRole1 = next.data.expectedRole1;
const expectedRole2 = next.data.expectedRole2;
  debugger
console.log(next.data);  

if (state.url.indexOf("admin") > -1 || state.url.indexOf("user") > -1) {
  next.data["isManual"] = true;
}

But the value is not modifying , any one let me know how to do this one.

I think your question is similar to this https://stackoverflow.com/questions/50284027/modify-data-object-in-activatedroute please visit it — Adam Strauss, Oct 31 '19 at 09:49

Michael Desigaud · Answer 1 · 2019-10-31T11:12:01.400

Why not adding the isManual property on the children routes:

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    canActivate: [DashboardRoleGuard],
    children: [{
      path: 'admin',
      component: AdminDashboardComponent,
      data: {isManual: true}
      // canActivateChild: [RedirectGuard]
    }, {
      path: 'user',
      component: UserDashboardComponent,
      data: {isManual: true}
      // canActivateChild: [RedirectGuard]
    }],
    data: {
      expectedRole1: ["admin", "SiteAdmin", "OrgAdmin", "SuperAdmin"],
      expectedRole2: ["user", "NormalUser"],
      redirectTo: "",
      isManual: false
    }

it is not the exact solution for my problem but it helped me resolve my problem. Thanks @Michael Desigaud — Santhosh, Nov 04 '19 at 06:36

How to change route object data in angular

1 Answers1