When Id change in *ngFor dynamic Routes not working in Angular 6

Question

`<div *ngFor="let data of projects">
  <a [routerLink]="'/projects/'+data.project_id">
 {{data.project_name}}</a>
</div>`

enter image description here

Link is changing when I click on link But page Content not changed

from

http://localhost:4200/projects/1

to

http://localhost:4200/projects/2

but data remains same!

There is no error... First time clicked then it is properly worked but when is second time another link click it is not working — riya jain, May 16 '19 at 05:49
@riyajain Can you provide app.module.ts code? I need to reproduce that issue in the Stackblitz — Prashant Pimpale, May 16 '19 at 06:06
and show the code of this `projects/'+data.project_id` route component — Prashant Pimpale, May 16 '19 at 06:06
Actually its redirects but angular having problem to re-render the same component! — Prashant Pimpale, May 16 '19 at 06:07

score 1 · Answer 1 · edited May 16 '19 at 06:20

1

Set onSameUrlNavigation: 'reload' in app.module.ts

like:

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
  exports: [RouterModule]
})

edited May 16 '19 at 06:20

Prashant Pimpale

10,349
9
44
84

answered May 16 '19 at 06:17

whyour

136
5

score 0 · Answer 2 · answered May 16 '19 at 07:06

0

Just a workaround if the onSameUrlNavigation: 'reload' did not worked!

HTML Code:

<div *ngFor="let data of projects">
  <div (click)="navigate(data)">
    {{data.project_name}}
  </div>
</div>

TS Code:

import {Router} from '@angular/router';
......
......

constructor(private router: Router) {}

navigate(data){
   this.router.navigateByUrl('/DummyRoute', { skipLocationChange: true }).then(() =>
       this.router.navigate(['/projects/' + data.project_id])
   );
}

answered May 16 '19 at 07:06

Prashant Pimpale

10,349
9
44
84

pro_details = new ProjectDetails(); constructor( private projectDetailService : ProjectDetailService, private route : ActivatedRoute ) { } ngOnInit() { const project_id = +this.route.snapshot.paramMap.get('project_id'); this.projectDetailService.getProjectByID(project_id) .subscribe(response => { this.pro_details = response}); } – riya jain May 16 '19 at 09:03
@riyajain Add the posted code in the Parent Component TS – Prashant Pimpale May 16 '19 at 09:08
what do i do... I am very stuck in this. suggest me something – riya jain May 16 '19 at 09:08
@riyajain Can you share the anydesk Id? – Prashant Pimpale May 16 '19 at 09:08
I am trying that 'sidebar.component.html' has on link and on that link i click this is route in 'show-details.component.tsl file and show data in 'show-details.component.html'' – riya jain May 16 '19 at 09:10
So add the above code in the `sidebar.component.ts` file – Prashant Pimpale May 16 '19 at 09:11
Nooo.. there is no code of this the " '/projects/'+data.project_id" is direct route to show-details.component Show my route File const routes: Routes = [ { path:'', redirectTo:'/home', pathMatch: 'full' }, { path:'home', component: HomeComponent,data: { title: 'Heroes List' }}, { path:'sw_info', component: SwInfoComponent}, { path:'about', component: AboutComponent ,data: { title: 'Heroes List' }}, { path: 'add_project', component: ProjectDetailsComponent}, { path: 'projects/:project_id', component: SidebarComponent}, { path: '**', component: PageNotFoundComponent } ]; – riya jain May 16 '19 at 09:14
@riyajain this Code: `navigate(data){ this.router.navigateByUrl('/DummyRoute', { skipLocationChange: true }).then(() => this.router.navigate(['/projects/' + data.project_id]) ); }` which provided in my answer – Prashant Pimpale May 16 '19 at 09:14
@riyajain Where did you use `RouterModule.forRoot(routes)`? – Prashant Pimpale May 16 '19 at 09:17
In app.module file – riya jain May 16 '19 at 09:17
@riyajain Then replace that line with `RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})` and test it – Prashant Pimpale May 16 '19 at 09:18
@riyajain Done..? – Prashant Pimpale May 16 '19 at 09:25
The variable that declared you -- `const routes: Routes = [ { path:'', redirectTo:'/home', pathMatch: 'full' }, { path:'home', component: HomeComponent,data: { title: 'Heroes List' }}, { path:'sw_info', component: SwInfoComponent}, { path:'about', component: AboutComponent ,data: { title: 'Heroes List' }}, { path: 'add_project', component: ProjectDetailsComponent}, { path: 'projects/:project_id', component: SidebarComponent}, { path: '**', component: PageNotFoundComponent } ];` – Prashant Pimpale May 16 '19 at 09:32
@riyajain I would suggest sharing the screen will solve it in 10 min using Anydesk or Team viewer if possible – Prashant Pimpale May 16 '19 at 09:33
@riyajain So can you provide me the anydesk Id so will take the remote and check? – Prashant Pimpale May 16 '19 at 09:44
@ Prashant Pimpale wow... superb..!! thank you soo much.... it is worked for me... :) – riya jain May 30 '19 at 05:54
@riyajain This is actually internally navigating to that URL `(which means URL change and then you can redirect to the original URL)` – Prashant Pimpale May 30 '19 at 06:58
@riyajain Feel free to accept and upvote the answer if it helped you! – Prashant Pimpale May 30 '19 at 06:59

When Id change in *ngFor dynamic Routes not working in Angular 6

2 Answers2