angularjs - Opening error popover from service in Angular 2 -

i create service responsible opening bootstrap popovers errors , success communicates. have 2 components errorcomponent, successcomponent , 1 service called communicatescomponent. use service open popover like

service.error('some error') service.success('success!')  

and should display popover provided text argument. doing setting component property in service followed , use property in service:

errorcomponent

export class errorcomponent implements oninit {     public text:string;     @viewchild('errorpopover') private errorpopover: ngbpopover;      constructor(private communicatesservice:communicatesservice) {            }      public ngoninit() {         this.communicatesservice.seterrorcomponent(this)     } } 

service:

@injectable() export class communicatesservice {     private errorcomponent:errorcomponent      public seterrorcomponent(component:errorcomponent) {         this.errorcomponent = component;     }      public error(text:string) {         console.log(this.errorcomponent)        // this.errorcomponent.text = text;     } } 

unfortunitelly, seems component object not provided well, because console log prints undefined. how should done?

regards

there 2 things change in design

1. errorcomponent , communicatesservice depends on each other. it's avoid - communicatesservice work different components. create rx observable public property of service, component can subscribe it. when service.success('success!'), service send message text subscribers.
2. in errorcomponent, popover component @viewchild. consider binding errorcomponent.text popover directly (reversing dependency).

these changes solve problems have , make design looser - easier understand , maintain.