Angular share data between service and two components

Question

I need to get Post[] from http and then I display it on post-list component. I can delete some items on post-list template, and edit some items by navigating to another route where I use post-edit component. How do I share same Post[] array between them so the changes will be instantly displayed in the app? I assume I need to store Post[] in the service? what is the correct way to edit/update it from component? here I'm trying to save Post[] array inside service by tap() operator inside the service

  getAllPosts(): Observable<Post[]> {
    return this.http.get<Post[]>("https://jsonplaceholder.typicode.com/posts");
  }

  getAllUsersPosts(userId: number): Observable<Post[]> {
    return this.getAllPosts().pipe(
      map((posts: Post[]) => posts.filter((p: Post) => p.userId === userId)),
      tap(posts => {
        //storing to service
        this.userPosts = posts;
      })
    );
  }

to share the updated Post[] after delete method executed I'm trying to send stored array back to subscriber, but it doesnt help

  deletePost(id: number): Observable<any> {
    return this.http.delete(`https://jsonplaceholder.typicode.com/posts/${id}`).pipe(
      mapTo(res => {
        const index = this.userPosts.findIndex(p => p.id == id);
        // console.log(index);
        this.userPosts.splice(index, 1);
        return this.userPosts;
      })
    )
  }

what is the correct way to achieve this?

How do you use getAllUsersPosts, deletePost and userPosts in your components? — frido
– frido, Commented Apr 16, 2019 at 8:49

Ram · Accepted Answer · 2019-04-16 05:26:24Z

1

Create an Behaviour Subject Singleton variable in the service and make it as an observable. Then subscribe to that observable from any component by importing the service, create an instance and subscribe to that observable singleton.

private publisherVariable= new BehaviorSubject<string>('empty')
castVariable = this.publisherVariable.asObservable()
this.publisherVariable.next(DATA_YOU_WANT_TO_SEND)

answered Apr 16, 2019 at 5:26

Ram

61911 silver badges21 bronze badges

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

Comments

blazehub · Accepted Answer · 2019-04-16 03:35:08Z

0

The persistence of userPosts will depend on the injected scope of service.

Try provding service a module scope or root scope

@module({
  providers:[PostService]
})
export class PostModule{}

Or

@Injectable({
  provideIn:'root'
})
export class PostService{}

Avoid putting postservice as provider both in module and component.

@Componenent({
  providers:[PostService]
})
export class PostComponent{}

answered Apr 16, 2019 at 3:35

blazehub

1,96022 silver badges25 bronze badges

Comments

Vaibhav · Accepted Answer · 2019-04-16 03:37:45Z

0

Create a model and create it as a singleton ,use this singleton within your service so same reference gets passed on and updated .Just for an example

export class PostsModel {
    private static instance: PostsModel;
    public prop1: type = '';
    public prop2: type ='';
    static getInstance() {
        if (!PostsModel.instance) {
            PostsModel.instance = new PostsModel();
        }
        return PostsModel.instance;
    }

    static destroyInstance() {
        delete PostsModel.instance;
    }
}

answered Apr 16, 2019 at 3:37

Vaibhav

1,50713 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular share data between service and two components

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related