Issue:
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>
Typescript 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));
}
}
Template HTML :
<app-user-profile [userProfile]="{{userProfile$|async}}"></app-user-profile>
Can anyone spot the issue here and help me out?
Child Typescript:
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 for Child Component:
<p>{{userProfile.userId}}</p>