In my component class, I have a property called renderContent which can be of either LessonPageType or TaskPageType based on the input value. Below is the code snippet from my component:
import {ChangeDetectionStrategy, Component, HostListener, Input, OnInit} from '@angular/core';
import {LessonPageType, TaskPageType} from '../../models/types';
@Component({
selector: 'app-page-renderer',
templateUrl: './page-renderer.component.html'
})
export class PageRendererComponent implements OnInit {
@Input() renderContent: LessonPageType | TaskPageType;
@Input() submission: TaskSubmissionType;
}
Issue: -
In my template, I'm trying to access the object within renderContent using renderContent?.accept_answer. However, the key accept_answer exists only in the TaskPageType and not in the other type. This discrepancy results in an error during AOT compilation as shown below. Is there any solution apart from changing the type of renderContent to any?
Error:-
ERROR in src/app/shared/components/page-renderer/page-renderer.component.html(16,17): : Property 'accepts_answer' does not exist on type 'LessonPageType | TaskPageType'. Property 'accepts_answer' does not exist on type 'LessonPageType'.