As a newcomer to Angular, I was introduced to types and interfaces today. Excited to apply my new knowledge, I decided to enhance my code by utilizing a custom interface instead of a direct type declaration:
@Input()
imageWidgets: ImageWidget;
Here is the interface I created:
export interface ImageWidget {
[index: number]: {
routerLink: string,
imageSrc: string,
title: string
}
}
I then passed this interface to the component via the input variable:
topics: ImageWidget = [
{
imageSrc : './assets/images/solutions.jpeg',
title : 'Solutions',
routerLink: '/solutions'
}
];
Now in the receiving component, I utilized an ngFor loop:
<div *ngFor="let imageWidget of imageWidgets"></div>
However, upon implementing the interfaces, I encountered the following error:
Type ImageWidget is not assignable to type (ImageWidget & NgIterable<{routerLink: string, imageSrc: string, title: string}>) | undefined | null
Despite extensive research, I struggled to resolve this error message. In an attempt to rectify the issue, I made the following adjustment:
@Input()
imageWidgets: ImageWidget | NgIterable<any>;
Even after this modification, the error persists. Can someone please shed light on what I might be doing wrong here?