change detection in angular2 using shared service

Question

i am having a parent function ngOnInit() which gets the value from google maps as follow

instance.input = document.getElementById('google_places_ac');
        autocomplete = new google.maps.places.Autocomplete(instance.input, { types: ['(cities)']});
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            instance.setValue(place.address_components[3].long_name, place.address_components[2].long_name, place.address_components[1].long_name);

        });

setValue() is function which shares value with shared service and on html page i have same thing as follow on parent and child <input id="google_places_ac" [(attr.state)]="state" [(attr.country)]="coutnry" name="google_places_ac" type="text" value="{{city}}" class="form-control" />

in parent component class i fire changedetection on setValue() function

   setValue(a, b, c) {
        this.coutnry = a;
        this.state = b;
        this.city = c;
        this.sharedService.country = this.coutnry;
        this.sharedService.city = this.city;
        this.sharedService.state = this.state;
        this.cdr.detectChanges();
      //  console.log(this.coutnry, this.state, this.city);
    }

this works well on parent but change is not happening on child , i created a click function which fires the changedetection on child which works too but i want it to fire automaticaly from parent is there any workaround for it?

I am already in d bed. So cant help you atm. But if you are using sharedservice, same way you can use sharedobject. So when parent view is changed, service's shared object will be updated and so every view connected to that object will get updated. — micronyks
– micronyks, Commented Apr 3, 2016 at 18:24
There is no two-way binding for attributes [(attr.state)]="state". This is only supported for properties (input and output) ´[(state)]="state"` — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 3, 2016 at 19:30
@GünterZöchbauer ohh thanks for the information.bdw i am still facing a problem with this question i am not able to get the data when route page is loaded . it works when page is rendered with parent or once the page is loaded and i change text in parent field but it doesnt show data on start when the page is rendered first , can you suggest anything? — Ironsun
– Ironsun, Commented Apr 3, 2016 at 22:12

Turdaliev Nursultan · Accepted Answer · 2016-04-03 18:53:01Z

5

When it comes to sharing a global object between components, it is better to use global shared service combined with Rxjs observable design pattern. Here is the code, You should configure it according to yours:

First, your global shared service should look like this:

import {Injectable} from "angular2/core";
import {Subject} from "rxjs/Subject";
@Injectable()
export class SearchService {

private _searchText = new Subject<string>();

public searchTextStream$ = this._searchText.asObservable();

broadcastTextChange(text:string) {
    this._searchText.next(text);
    }
}

Second,you inject your service into your parent component

...
constructor(private _searchService:SearchService) {
...

Third, add to the providers list of your parent component or higher component the service, because this service should the same instance between subscribed components, This part is very important:

providers: [SearchService,...]

Then when you want to broadcast new change you call broadcastTextChange with a new value as follows:

...
this._searchService.broadcastTextChange("newTextHere");
...

Then inside your the child component you inject the same service and subscribe to it:

this._searchService.searchTextStream$.subscribe(
        text => {
            // This text is a new text from parent component.
            this.localText = text;
            //Add your own logic here if you need.
        }
    )

answered Apr 3, 2016 at 18:53

Turdaliev Nursultan

2,5761 gold badge25 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Ironsun Over a year ago

thanks for the long answer will give it a try and let you know

Ironsun Over a year ago

hi i am facing a problem with solution , change detection doesnt happen when routing , it works if my child page is open at the time of parents rendering but not if i call it later via routing, am i missing something??

Turdaliev Nursultan Over a year ago

Could you move your shared service on a providers list of your root component, which has <router-outlet> directive ?

Ironsun Over a year ago

i can but thats not parent my structure is like this parent > child > child but i will give it a try to broadcast message oninit will let you know

Ironsun Over a year ago

-i subscribed to the service in mid child and again brodcasted the message but not caught by last child, should i add it to provider and create a new instance or is there any other way?

|

Collectives™ on Stack Overflow

change detection in angular2 using shared service

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related