Below codes on Spartacus version 2.0 work fine. the template file:
<ng-container *ngIf="data$ | async as data">
<cx-media [container]="data.media" [title]="data | json"></cx-media>
</ng-container>
the ts file:
@Component({
selector: 'app-custom-banner',
templateUrl: './custom-banner.component.html',
})
export class CustomBannerComponent {
data$: Observable<CmsBannerComponent> = this.componentData.data$;
constructor(protected componentData: CmsComponentData<CmsBannerComponent>) {}
}
But it's not compiling on spartacus version 4 and giving below errors.
Type 'CmsBannerComponentMedia | CmsResponsiveBannerComponentMedia | undefined' is not assignable to type 'MediaContainer'.
Type 'undefined' is not assignable to type 'MediaContainer'.ngtsc(2322)
Error: src/app/spartacus/features/custom-cms-components/custom-banner/custom-banner.component.html:3:14 - error TS2322: Type 'CmsBannerComponentMedia | CmsResponsiveBannerComponentMedia | undefined' is not assignable to type 'MediaContainer'.
Type 'undefined' is not assignable to type 'MediaContainer'.
3 <cx-media [container]="data.media" [title]="data | json"></cx-media>
~~~~~~~~~
src/app/spartacus/features/custom-cms-components/custom-banner/custom-banner.component.ts:8:16
8 templateUrl: './custom-banner.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component CustomBannerComponent.
I reproduced the issue and created a bug ticket. You can observe it, and update your project when it will be done and released.
For now, I can suggest only ugly workarounds like:
[container]="$any(data.media)" "angularCompilerOptions": {
"strictTemplates": false
}