Pass data from one Component to another Component in angular4

Question

I have two Components(Component1 and Component2) in my Angular Application. These two components I have rendered in my app component. Now I want to send a value from Component1 to Component2. How to Send it. Are there any best practices??

In Component1 I have a code Like this. Component1.html

<button (click)="passData()">Click Me</button>

Component1.ts

import { Component, OnInit , Output , EventEmitter } from '@angular/core';
@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html',
  styleUrls: ['./component1.component.css']
})
export class Component1Component implements OnInit {

   Component1Variable:string="Component1VariableSent";
  constructor() { }
  ngOnInit() {
  }
   @Output()
   SendValue=new EventEmitter<string>();
   passData()
   {
        this.SendValue.emit(this.Component1Variable);
   }
}

In Component2.html I have

<app-component1 (SendValue)="ValueFromComp1($event)"> </app-component1>
{{ValueFromComponent1}}

In Component2.ts I have

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-component2',
  templateUrl: './component2.component.html',
  styleUrls: ['./component2.component.css']
})
export class Component2Component implements OnInit {
  ValueFromComponent1:any;
  constructor() { }

  ngOnInit() {
  }
  ValueFromComp1(var1:any)
  {
      this.ValueFromComponent1=var1;
  }

}

In appcomponent.html I hav code Like this.

<app-component1></app-component1>
<app-component2></app-component2>

Now I am getting to send the value from component1 to component2. But there is a click button two times in the output.

And another question is that I want to transfer data from one Component to another Component which resides in the same hirearchy of component tree. By doing in the above way I am not getting the components in the same hirearchy of component tree.

Please add the code that demonstrates what you try to accomplish. — Günter Zöchbauer, Nov 21 '17 at 07:22
best place to start https://angular.io/guide/component-interaction — Sajeetharan, Nov 21 '17 at 07:24
@roopteja you are using event emitters just take a look at it and it will be good to go — Rahul Singh, Nov 21 '17 at 07:31
Possible duplicate of [Angular 4: How to pass API data from one component into another component?](https://stackoverflow.com/questions/47376442/angular-4-how-to-pass-api-data-from-one-component-into-another-component) — Jota.Toledo, Nov 22 '17 at 11:45

Rahul Singh · Answer 1 · 2017-11-21T07:27:19.547

5

There are three ways you can accomplish the same .

Event Emitters (For cases where components have parent child relation ship)
Shared Services
Ngrx (a more expansive shared service for large projects)

edited Nov 21 '17 at 07:27

answered Nov 21 '17 at 07:25

Rahul Singh

19,030
11
64
86

2

there are plenty of questions similar, why you are answering the same – Sajeetharan Nov 21 '17 at 07:27
2

might be he is a starter to SO and he needs some help to begin with he can take it up from there @Sajeetharan i have seen you answer questions like this too – Rahul Singh Nov 21 '17 at 07:28
haha i did but not these days .it make sense if he provides code! – Sajeetharan Nov 21 '17 at 07:29
i get it but if he were specific i could have commented, but he wasnt had to answer . you DV if you want to i will take it down – Rahul Singh Nov 21 '17 at 07:30
Sajeetharan I have attached a code and my question also.Please take a look into it and answer. Thanks In advance – roopteja Nov 21 '17 at 07:32
@roopteja sajeetharan is helping he is not here to answer your questions . Its his obligation – Rahul Singh Nov 21 '17 at 07:33
Sorry My english is not good. My apologies to Sajeetharan. Would you please look into the code and help me accordingly. – roopteja Nov 21 '17 at 07:34
Rahul I have studied somewhere that Component Interactions(Child Component to Child Component ) in Angular is done by Sending the value from child to parent and then to the corresponding child. Is that true and does it work for all scenarios of component Interaction. – roopteja Nov 21 '17 at 07:40
@roopteja For complex interactions i will always suggest you to use shared services much easier to debug and also write code , ya the thing you mentioned can be done but it is combersome – Rahul Singh Nov 21 '17 at 07:42
Rahul If I execute the above program I am getting 2 buttons in my main html page. How to get rid of that – roopteja Nov 21 '17 at 08:47
@Rahul In the above comment you just mentioned complex interactions but I am simply passing a string variable from one component to another component. – roopteja Nov 21 '17 at 09:05

score 4 · Answer 2 · answered Nov 21 '17 at 07:37

If you are passing data from parent component to your child component you should use @input.

In your case you want to pass data from one component to another which are in the same level. i would suggest you to go for shared service.

Look at this answer to get more details.

Pass data from one Component to another Component in angular4

2 Answers2

Linked

Related