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?

Answer 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>