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?

Answer 1

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.