Passing Async data from parent to child in Angular (INPUT)

Question

User.component.ts

 user:User;

  constructor(private authService:AuthService) {}

  ngOnInit(): void {
    this.authService.user.subscribe((userVal) => {
      this.user = userVal;
      console.log(this.user);
    });
  }

User.component.html

<div class="container mt-3 ">
    <app-user-detail [userData]="user"></app-user-detail>
</div>

User.detail.component.ts

export class UserDetailComponent implements OnChanges {
  @Input() userData: User;

  constructor() {}

  ngOnChanges() {
    console.log(this.userData)
  }

}

Getting the value of "this.user" in User.component.ts but getting undefined in User.detail.component.ts

Why is that?

This is answered here stackoverflow.com/questions/49662341/… — MBB
– MBB, Commented Jul 28, 2021 at 19:00
Answer no 1. of top answer doesnt work which is what I want to work, ngOnChanges(changes) are undefined " userData: SimpleChange currentValue: null firstChange: true previousValue: undefined" Answer no 2. obviosly works since its a duplication of the code in the parent but that would be ugly id rather not use that — Lajos Bela
– Lajos Bela, Commented Jul 29, 2021 at 8:50
You may have add the service code as well. I believe you need to have BehaviorSubject. A sample stackblitz here - stackblitz.com/edit/… — MBB
– MBB, Commented Jul 29, 2021 at 14:58

Juan Vicente Berzosa Tejero · Accepted Answer · 2021-07-28 16:34:51Z

1

Try this:

[userData]="user | async"

and if it alone doesn't work, add these changes:

get user(){
return this.authService.user;
}

constructor(private authService:AuthService) {}

  ngOnInit(): void {
}

<div class="container mt-3 ">
    <app-user-detail [userData]="user | async"></app-user-detail>
</div>

edited Jul 28, 2021 at 16:34

answered Jul 28, 2021 at 16:29

Juan Vicente Berzosa Tejero

3,0422 gold badges8 silver badges16 bronze badges

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

1 Comment

Lajos Bela Over a year ago

Doesn't work, still getting the same undefined in UserDetailComponent either way. Btw This.authService.user is a Subject in authService

Collectives™ on Stack Overflow

Passing Async data from parent to child in Angular (INPUT)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related