Push object into another component array in angular 2

Question

    Like

    // My First Component
    @Component({
      selector: 'app-component1',
      templateUrl: './component1.html'
    })
    export class Component1 {
       books: any[] = ['Java'];
    }

    // My Second Component
    @Component({
      selector: 'app-component2',
      templateUrl: './component2.html'
    })
    export class Component2 {
     // Now I want to push 'Angular2' in books array from here. So, How can i do this and remember there is no any relationship of parent child component.
    }

I want to push object from Component2 to Component1.

I have already try with Observable.

Can you please help me in above scenario?

But may event emitter using between parent child component and there is no any relation ship of parent child. — Bhaumik Sathvara, Nov 09 '17 at 05:04
Sajeetharan : How can we push object into another component array by service ? — Bhaumik Sathvara, Nov 09 '17 at 05:08
https://stackoverflow.com/questions/46560989/angular-2-4-communication-between-two-component-via-a-shared-service — Sajeetharan, Nov 09 '17 at 05:12
Yes, I have ever seen document related only communication between parent-child relational component. And here not parent child component. — Bhaumik Sathvara, Nov 09 '17 at 06:29

score 1 · Answer 1 · answered Nov 09 '17 at 06:38

1

You can use a shared service to manage that, put provider:[myService] in the highest level module which contains these two component, then it become a singleton object.

@Injectable()
class myService{
books=[]
} 

// My First Component
@Component({
  selector: 'app-component1',
  templateUrl: './component1.html'
})
export class Component1 {
constructor(private _myService:myService){
   this._myService.boosk.push('Java')
}
}

// My Second Component
@Component({
  selector: 'app-component2',
  templateUrl: './component2.html'
})
export class Component2 {
constructor(private _myService:myService){
}
}

answered Nov 09 '17 at 06:38

Fan Cheung

10,745
3
17
39

But it's not reflect in Component2. Whenever I push Book Name from component one it is not reflecting on component2. So, How to update in Component2 ? – Bhaumik Sathvara Nov 09 '17 at 07:04
this.books=this._myService.books in component 2. Have you provide the service in highest level module ? – Fan Cheung Nov 09 '17 at 07:09
Yes, I have did same thing in component2. I have added this code in component2 ngOnInit() -> I am Right ? – Bhaumik Sathvara Nov 09 '17 at 07:11
create a plunker. Share service suppose to work – Fan Cheung Nov 09 '17 at 07:13
https://plnkr.co/edit/7OKOcI7RMovV6lccheGy?p=preview – Bhaumik Sathvara Nov 09 '17 at 07:22
the plunker you created is not an angular2 template it won't work. use this https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=catalogue – Fan Cheung Nov 09 '17 at 08:28

Push object into another component array in angular 2

1 Answers1