Angular 4: How to update value of array in another component from another component

Question

posts.component.ts - This is loaded in the router outlet in the AppComponent

PostsComponent {
    posts: any = [
            {
               'id': 1,
               'comment': 'Blah blah blah',
               'is_liked': false,
               'like_count' = 24,
            },
            {
               'id': 2,
               'comment': 'Yeah yeah yeah!',
               'is_liked': false,
               'like_count' = 24,
            }
        ]
}

posts-controls.component.ts - This is the child of the FooterComponent

PostControlsComponent {
    likePost('post_id'){
        //What do I do here
    }
}

If I run this method likePost(1); how do I update 'is_liked' to be 'true' and increment 'like_count' by 1 in the PostsComponent?

What does the html template of the PostsComponent look like? Can you show the whole TypeScript files for the PostControlsComponent and the PostsComponent, including the @Component annotations? — Kim Kern
– Kim Kern, Commented Jun 14, 2017 at 21:42

cdr89 · Accepted Answer · 2018-06-13 14:28:07Z

5

You can use the Output decorator from @angular/core inside your PostControlsComponent to emit an event to the parent component, like:

 @Output()
 public onPostLiked = new EventEmitter<string>();
 ...
 public likePost(postId: string) {
    this.onPostLiked.emit(postId);
 }

And implement a onPostLiked method, which updates the likes of the post with postId.

public onPostLiked(postId: string) {
   let postToModify = this.posts.find(post => post.id === postId);
   if(postToModify) {
     postToModify.is_liked = true;
     postToModify.like_count += 1;
     // send some post request to back-end to inform about post count updated
   }
}

(OT: consider using camel-case (eg. like_count => likeCount) for your object attributes)

And for your HTML something like that:

<post-controls (onPostLiked)="onPostLiked($event)"></post-controls>

For more about component interaction you can read this: https://angular.io/guide/component-interaction

And also you should think about using a redux approach via @ngrx to keep your application state in one place (it is easier to debug and you can easily use the onPush ChangeDetectionStrategy).

https://medium.com/front-end-hacking/managing-state-in-angular-apps-with-ngrx-store-and-ngrx-effects-part-1-a878addba622

edited Jun 13, 2018 at 14:28

cdr89

9869 silver badges19 bronze badges

answered Jun 14, 2017 at 21:53

cyr_x

14.3k2 gold badges35 silver badges48 bronze badges

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

3 Comments

Kabelo2ka Over a year ago

PostsComponent and PostsControlComponent are not parent child components. Should this still work?

cyr_x Over a year ago

If they're not parent child you could pass the event up the tree using the same method or you use a service, which has the method to like the post with id postId.

cyr_x Over a year ago

For the service look here: angular.io/tutorial/toh-pt4 and read the first link from my answer (section: Parent and children communicate via a service)

Collectives™ on Stack Overflow

Angular 4: How to update value of array in another component from another component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related