Detect changes from component to other and bind the new data

Question

I'm stuck weeks about how to notify Component 2 from Component 1 that the data has been updated and you should bind it without refresh. I will inform you my code maybe someone can know what is the wrong with my concept.

I have two components (news-feed) and (post).

news-feed.component.ts:

EDIT

This is get sharedData

get sharedData() //<--a getter
            {
                return this._newElement.sharedData;
            }

This is ngOnInit()

ngOnInit() {

this._newElement.data.subscribe((param: any) => { //<--subscribe to an observable
    this.data=param;
});

In my post component onsuccess I used this._newElement.change(this.result.data); And inside newsFeed() this._newElement.sharedData=this.result.data.posts; and in my html I replaced data with sharedData.

End of EDIT

 newsFeed() {

        this._newsFeedService.newsFeedService(this.user)
            .subscribe(
                response => {
                    this.result = response;
                    if (this.result.code == -502) {
                      // error
                        }
                    } else if (this.result.code == 1) {
                        this.data = [] = this.data || [];
                        this.result.data.posts.forEach(item => {
                            this.data.push(item);
                        });
                    }
                    else {
                        this.alert = this._appService.newAlert('danger', this.result.msg);
                    }
                },
                error => console.log(error)
            );
    }

news-feed.service.ts:

@Injectable()
export class NewsFeedService {


    private newsFeedAPI = AppGlobals.API_URL + 'news_feed/news-feed.php';

    constructor(private _appService: AppService) {
    }


    newsFeedService(value: Object) {
        return this._appService.LoadAPI(value, this.newsFeedAPI);
    }
}

news-feed.ts:

export class NewsFeed {

user_id: string;
session_key: string;
page: number;
postText: string;
postID: any;

constructor() {
}

}

And this is my LoadAPI() that I'm using above, it is in app.service.ts:

 public LoadAPI(data: Object, API: string): Observable<any> {
        const headers = new Headers();
        headers.append('Content-Type',
            'application/x-www-form-urlencoded;charset=utf-8');

        return this._http.post(API, data, {
            headers: headers
        }).map(res => res.json());
    }

Now in my html I'm displaying the data as usual:

 <div *ngFor="let item of sharedData" id="{{item.post_id}}" class="post_{{item.post_id}}">
        <article  class="hentry post card_{{item.post_id}}">
            //data
        </article>
</div>

The big question is:

In my post.component.ts I have insertPost() function and onSuccess it returns new data that the news-feed.component should detect it. What is the main idea?

In your service, create an Observable from a Subject. When you insert make a "misubject".next. In news-feed.component subscribe to the observable. see an example of the service in https://stackoverflow.com/questions/48112868/call-function-from-one-component-to-another-to-update-the-button/48112998?noredirect=1#comment83203111_48112998 — Eliseo, Jan 07 '18 at 14:41
@Roula Halabi, if the two components are in screen at same time, both -news-feed and post- must have in the constructor the news-feed-service (if your application is a common that from post you navigate to news-feed only need put the subscribe to the list in a ngOnInit). — Eliseo, Jan 07 '18 at 15:34
In the post I'd linked I created a new service, but in your case use the own news-feed-service. In this service you encapsule the logic for list, post, update.. AND make an observable of a subject witch any component can be subscribe. In a post or in a update you make the subject.next() to make any component that are subscribe to observable take acount of the change — Eliseo, Jan 07 '18 at 15:34
@Eliseo My components are in screen at same time, so in my post.component.ts I will put in constructor `this._newsFeedService.NewsFeedService()` but what can I do with empty parameter, I should pass an object right? — Roula Halabi, Jan 07 '18 at 15:50
Any idea [user](https://stackoverflow.com/users/2780943/user184994) — Roula Halabi, Jan 08 '18 at 22:10

Detect changes from component to other and bind the new data

0 Answers0