error TS2322: Type 'PropUser | null' is not assignable to type 'PropUser'

Issue

Error:

Error: src/app/user/containers/shell-user-profile/shell-user-profile.component.html:1:20 - error TS2322: Type 'PropUser | null' is not assignable to type 'PropUser'.
      Type 'null' is not assignable to type 'PropUser'.
    
    1 <app-user-profile [userProfile]="(userProfile$|async)"></app-user-profile>

ts file :

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { actionGetProfile } from "./../../store/actions";
import { selectProfile } from "./../../store/selectors";
import { select, Store } from "@ngrx/store";
import { PropUser } from '../../store/reducer';
import { Observable, pipe } from 'rxjs';
import { map } from "rxjs/operators";

@Component({
  selector: 'app-shell-user-profile',
  templateUrl: './shell-user-profile.component.html',
  styleUrls: ['./shell-user-profile.component.scss']
})
export class ShellUserProfileComponent implements OnInit {

  @Output() userProfile$: Observable<PropUser> = new EventEmitter();

  constructor(private readonly store: Store) { }

  ngOnInit(): void {
    this.store.dispatch(actionGetProfile());
    this.userProfile$ = this.store.select(selectProfile).pipe(map((data: PropUser) => data));
  }

}

html :

<app-user-profile [userProfile]="{{userProfile$|async}}"></app-user-profile>

What am I missing here? any one help me?

Child ts:

import { Component, Input, OnInit } from '@angular/core';
import { PropUser } from '../../store/reducer';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.scss']
})
export class UserProfileComponent implements OnInit {

  @Input() userProfile: PropUser;

  constructor() {
    this.userProfile = { userId: 0, id: 0, title: "", body: "" }
  }

  ngOnInit(): void {
  }

}

html:

<p>{{userProfile.userId}}</p>

Solution

The async pipes return signature is something like <T>(input$: Observable<T>): T | null. Because it returns null to the template while it's awaiting a response from an asynchronous call.

You have multiple option to solve the problem:

[userProfile]="(userProfile$|async)!"

Or use $any like this:

 [userProfile]="$any(userProfile$|async)"

Answered By - Alireza Ahmadi