Within my application, there is a parent component that houses a list of objects representing various fruits. When a user clicks on a fruit, its data is passed to the child component for display as detailed information.
<app-details
[fruit]="selectedFruit"
></app-details>
Within the details template:
<div class="fruit-details">
<h1>{{fruit.name}}</h1>
<h1>{{fruit.color}}</h1>
<h1>{{fruit.description}}</h1>
</div>
The 'fruit' property is defined as an object type in the details component.
@Input()fruit: Object;
An error message appears indicating something like
Property 'description' does not exist on type 'Object'
. The issue can be resolved by specifying the "fruit" property with the datatype "Object". What is the best way to address this problem without removing the datatype?