Angular: Adding value to array of another component

Question

I have 2 components, onclick of button of 1st component the value (any string) should be added to the array of the 2nd component. How can i achieve this? I work on angular 4.

@Component({
  selector: 'app-sibling',
  template: `
    {{message}}
    <button (click)="newMessage()">New Message</button>
  `,
  styleUrls: ['./sibling.component.css']
})
newMessage() {
    console.log("button clicked");
  }

What's the relationship between these components? Parent-child? Siblings? — bugs
– bugs, Commented May 17, 2018 at 9:06
Use a service (based on observables) to comlunicate between the 2 components if they are not parent/child, otherwise use Input/Output — David
– David, Commented May 17, 2018 at 9:07
Have a look at the official docs about it: angular.io/guide/component-interaction — bugs
– bugs, Commented May 17, 2018 at 9:12

Sajeetharan · Accepted Answer · 2018-05-17 09:09:01Z

1

You are primarily looking to communicate between two components,

You can use a service with Array. A service in Angular is a singleton, meaning it is managed as a single instance. So if each of the components access the service, they will access the same shared data.

export class cartService{
    prod :any = [];        
    UpdateArray (newObject: any) {
        this.prod.push(newObject);         
    }
}

In your component you can do this,

  this._cartService.UpdateArray(this.prod);

any can be replaced with your object type

answered May 17, 2018 at 9:09

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

Collectives™ on Stack Overflow

Angular: Adding value to array of another component

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related