Error when sending 'user' observable from app component (async-pipe)

Question

Here is my App.component.ts file from where I am sending 'user' observable to the 'header' component as input.

import { Component, OnDestroy, OnInit } from '@angular/core';
import { AuthService } from '../../core/auth/auth.service';
import { User } from '../../core/models/User';
import { Subscription, Observable, BehaviorSubject } from 'rxjs';
import { Router } from '@angular/router';

@Component({
  selector: 'trisha-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnDestroy, OnInit {
  user: Observable<User>;
  userSubscription: Subscription;

  constructor(
    private authService: AuthService,
    private router: Router
  ) { }
  ngOnInit(): void {
    this.user = this.authService.user;
    this.userSubscription = this.authService.findme().subscribe(user => {
      this.user = user;
    });
  }

  logout() {
    this.authService.logout();
    this.router.navigate(['/']);
  }

  ngOnDestroy(): void {
    if (this.userSubscription) {
      this.userSubscription.unsubscribe();
    }
  }
}

---

Following is the App.component.html file

<trishapp-header [user]="user | async" (logoutEvent)="logout()"></trishapp-header>
<router-outlet></router-outlet>

---

Following is my header.component.ts file

import { Component, OnInit, Input, EventEmitter, Output, ChangeDetectionStrategy } from '@angular/core';
import { User } from 'src/app/core/models/User';

@Component({
  selector: 'trishapp-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class HeaderComponent implements OnInit {

  @Input() user: User;
  @Output() logoutEvent = new EventEmitter<any>();
  constructor() { }

  ngOnInit(): void {
  }
  logout() {
    this.logoutEvent.emit();
  }
}

---

The problem is I am getting value in my header component properly, but maybe because of the following error my application is not working properly

ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

Please help me I can't find anything wrong in my App.component.ts as the 'user' is already an observable

Answer 1

• this.user = this.authService.user;, first you're stating the class property user of your component is the observable within your service, and you're right to use the async pipe to get the last emitted value;

• then, this.user = user;, you're stating the class property user of your component is the last emitted value of authService.findMe() Observable, so the setted value is already resolved and you cannot use the async pipe on it.

    ngOnInit(): void {
        this.user = this.authService.user;
        this.userSubscription = this.authService.findme().subscribe(user => {
          this.user = user;
        });
      }