Angular 2 refresh same page

Question

I have an Component that display a list of projects, with Edit and Delete buttons

If i click delete:

onDelete(projectName: string): void {
    this.projectService.deleteProject(projectName);

    this.router.navigate(['/projects']);
}

My router component:

export const projectListRouters: Routes = [
{
    path: '',
    children: [
        {path: '', component: URLComponent},
        {path: 'login', component: Login},
        {path: 'projects', canActivate: [AuthGuard], component: ProjectListComponent},

        {path: 'project/new/-', component: ProjectDetails, canActivate: [AuthGuard], data: {oparationType: 'new'}},

        // otherwise redirect to home
        {path: '**', redirectTo: ''}
    ],
},

];

My problem is that the this.router.navigate(['/projects']) does not refresh the list after deleting the project,

refer : http://stackoverflow.com/questions/41427405/navigate-to-another-page-with-a-button-in-angular-2 — Jitendra Khatri, Apr 24 '17 at 07:23
can you post your component that is routed to when you go to /projects? — snorkpete, Apr 24 '17 at 07:36
@user2143023, is onDelete function is in the same route i.e /projects? — Jayakrishnan, Apr 24 '17 at 07:51
no, i meant to include your ProjectListComponent. Also include the ProjectService, for completeness — snorkpete, Apr 24 '17 at 07:53

score 2 · Accepted Answer · answered Apr 24 '17 at 07:52

2

I presume you are redirecting to the same page.If that's the case, then please update your model say projectList that stores the list of project names.

If deleteProject is async call, then set this.router.navigate(['/projects']); in promise, otherwise just removing the element from projectList will do.

Hope it helps!!

answered Apr 24 '17 at 07:52

Jayakrishnan

4,232
2
23
35

updating the **projectList** solved my problem, thanks for your help – Yosefarr Apr 24 '17 at 09:06

score 0 · Answer 2 · answered Apr 24 '17 at 07:51

There is now way to refresh component at all. You can create dummy component, redirect to it and redirect back to /projects.

After you make deletion of an item, you should just make a call to backend to retrieve list of projects as you did when you load component.

score 0 · Answer 3 · answered Apr 24 '17 at 08:52

Rather you can load your project list in subscribe of service.

delete() {

        this._service.delete(this.id).
            subscribe(x=> {
                // call your list here.
                this.projectList();
               }, error => {
                alert(error);
            });
    }

Angular 2 refresh same page

3 Answers3