0

I have a dashboard component which looks like the below 

@Component({
    selector: 'dashboard',   
    template: '<category-list></category-list>
               <header-top></header-top>
               <router-outlet></router-outlet>'
})

export class Dashboard{  
    constructor() { 
    } 
}

The category-list component lists all the categories in the dashboard sidebar page , and the base routing of '/dashboard' loads all the list first in the router-outlet(which has edit option also , when here edited there should also change), what is the best way to communicate a router outlet child with parent siblings ?

category-list component is 

@Component({
    selector: 'category-list',   
    template: "all category list"
})

export class DashboardCategoryList{  
    constructor() { 
    } 
}

My child component inside the router outlet looks like 

@Component({
    selector: 'category-list-edit',   
    template: ''
})

export class DashboardCategoryList{  
    constructor() { 
    } 
}

The edits in the category-list-edit should be reflect in the category-list, how can this be achieved ?

Niyaz
  • 2,677
  • 3
  • 21
  • 40
  • Possible duplicate of [Angular 2 dynamic tabs with user-click chosen components](http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components) – Niyaz Oct 04 '16 at 08:53

1 Answers1

2

You can have a service injected from your root component so that the same instance is available throughout your app. Have an event in that service and subscribe to that EventEmitter from category-list and emit the event from category-list-edit when some edit is made like so:

import {EventEmitter, Injectable} from '@angular/core';

@Injectable()
export class CategoryService {
  categoryListEdited: EventEmitter<any> = new EventEmitter<any>();
  constructor() {}
}

@Component({
    selector: 'category-list-edit',   
    template: ''
})
export class DashboardCategoryListEdit{  
    constructor(private categoryService: CategoryService) { 
    } 

    edit(){
        //edits made here
        this.categoryService.categoryListEdited.emit({});
    }
}

@Component({
    selector: 'category-list',   
    template: "all category list"
})
export class DashboardCategoryList{  
    constructor(private categoryService: CategoryService) { 
        this.categoryService.categoryListEdited.subscribe(data => {
            console.log("something was changed in category-list-edit");
        });
    } 
}
lbrahim
  • 3,710
  • 12
  • 57
  • 95
  • is this is the only way ? or anyother ways are there ? – Niyaz Sep 28 '16 at 11:41
  • Nothing comes to mind at the moment. Reply here if you do find other ways. – lbrahim Sep 28 '16 at 11:45
  • This is cool , will try and come with queries :) , Thank you for the fast response. – Niyaz Sep 28 '16 at 11:51
  • Wow , Awesome thank you man , it is working great , thank you again for teaching this cool way , will more observables in angular app affect any performance issue ? – Niyaz Sep 28 '16 at 16:35