Transfer data between angular components using @input and @output

Question

I have two components sitting one in another.

    settings folder
      |--settings.component.css
      |--settings.component.html
      |--settings.component.ts
      |-- userPRofile folder
            |-- userProfile.component.css
            |-- userProfile.component.html
            |-- userProfile.component.ts

Now in settings component, I get some data with function while OnInit.

    this.service.getUserSettings().subscribe(
       res => {
         this.userSettings = res;

And now I want this data to be sent to the userProfile component. How can I achieve this?

Please share your Html and ts file, so that we can provide a straight solution — Amit Rai, Sep 12 '19 at 07:46
In question , you can see settings.ts part where I get res variable and put it inside this.userSettings. Now I want userProfile.ts to get that userSettings variable that's all. consider clean userProfile.ts file for example — David, Sep 12 '19 at 07:54

Muhammed Albarmavi · Accepted Answer · 2019-09-12T07:46:37.003

2

you just need use property binding to pass the data to child component

settings component template

<app-user-profile [data]="userSettings"></app-user-profile>

userProfile.ts

@Input() data:any;

now the value from the userSettings will pass to the data property.

edited Sep 12 '19 at 07:46

answered Sep 12 '19 at 07:34

Muhammed Albarmavi

23,240
8
66
91

1

I want to use data from settings component inside userProfile component. Can you write more detailed example? I cannot understand this one – David Sep 12 '19 at 07:39
from the parent component, you can pass data to child component is child component and parent component is passing data , userSettings dirctly pass to child . – Amit Rai Sep 12 '19 at 07:41
@David I have update the answer is it still not clear ? – Muhammed Albarmavi Sep 12 '19 at 07:47
As I understand settings component is html file ? But I want something different I think. I mean I create some variable in settings.ts file and want to use it in userProfile.ts How to send from settings.ts>userProfile.ts ???? – David Sep 12 '19 at 07:53
is userProfile is child inside settings setting template or not – Muhammed Albarmavi Sep 12 '19 at 07:54
Yes I have settings folder and inside that folder I have userProfile. Variable is generated in settings.ts file and I want to use it in userProfile.ts – David Sep 12 '19 at 07:57
is userProfile inside the template (html file) of settings ? – Muhammed Albarmavi Sep 12 '19 at 08:00
1

@David check this demo https://stackblitz.com/edit/angular-pr6rpd – Muhammed Albarmavi Sep 12 '19 at 08:04
I've updated question now you can see all folders and files there – David Sep 12 '19 at 08:05
I see it works but I don't understand how @Input() user:any; gets data from userData ??? It just simply gets everything that is exported from all components ??? if so how can it get only specific data ? – David Sep 12 '19 at 08:22
check setting template file ` [user]="userData"` – Muhammed Albarmavi Sep 12 '19 at 08:32
Ok I understand. Problem is that you put userProfile inside settings template. And I want userProfile to work independently from settings component at all. Just want to send data from one .ts file to another .ts file – David Sep 12 '19 at 10:06
I accepted the answer, just want a hint how to send from one .ts to another .ts without using templates ? – David Sep 12 '19 at 10:24
you can use global service in that case – Muhammed Albarmavi Sep 12 '19 at 10:24
ok thnx. As I understand if I want to transfer some data from one .ts to another .ts then I must use some service. thnx – David Sep 12 '19 at 10:31

score 1 · Answer 2 · answered Sep 12 '19 at 07:55

In settings component template html User
<app-user-profile (open)="onOpen($event)"  [data]="userSettings"></app-user-profile>
 onOpen():void{
// code goes here
}

In UserProfile.ts 
@Input() data:any;
@Output() open: EventEmitter<any> = new EventEmitter();

Transfer data between angular components using @input and @output

2 Answers2

Linked