Within my Angular component, I am faced with a challenge involving an Input that can be one of two types.
@Input() profile: UserProfileDetails | BusinessProfileDetails;The structure of the profile template is straightforward and I want to avoid duplicating code by using a single template. However, due to the differences in properties between the two types, I encounter a template error.
export interface UserProfileDetails {
createdOn: Date;
id: string;
name: string;
}
export interface BusinessProfileDetails {
businessId: string;
businessLocation: string;
createdOn: Date;
id: string;
name: string;
}
In the template code:
<div>
<h1>{{profile.name}}</h1>
<div>{{profile.createdOn}}</div>
<div>{{profile.id}}</div>
<div *ngIf="profile?.businessId">{{profile.businessId}}</div>
<div *ngIf="profile?.businessLocation">{{profile.businessLocation}}</div>
</div>
I comprehend the root cause of the error, yet I am uncertain about how to resolve it while still utilizing the or condition
@Input() profile: UserProfileDetails | BusinessProfileDetails;