How to resolve "property doesn't exists in type object" error in angular?

Question

In my application there is a parent component that contains a list of objects that represents different fruits. When a user selects a fruit, its data are passed to the child component which displays all the data as details.

        <app-details 
            [fruit]="selectedFruit"
        ></app-details>

Inside the details template:

<div class="fruit-details">
    <h1>{{fruit.name}}</h1>
    <h1>{{fruit.color}}</h1>
    <h1>{{fruit.description}}</h1>
</div>

'fruit' property is set to type object in details component. @Input()fruit: Object;

An error occurs stating something like Property 'description' does not exist on type 'Object'. Not setting "fruit" property to datatype of "Object" solves the issues. But How can I solve this issue without removing the data type.

Object is not the right type for fruit. fruit: { [key: string]: any } would work better, and if you could create your own Fruit interface, that would be ideal. — Alberto Rivera
– Alberto Rivera, Commented Jun 10, 2020 at 3:18

Zze · Accepted Answer · 2020-06-10 04:29:11Z

1

Declare an interface for Fruit and then use that as your type:

interface Fruit { 
    name: string;
    color: string;
    description: string;
}

@Input()fruit: Fruit;

answered Jun 10, 2020 at 4:29

Zze

18.9k14 gold badges95 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicho · Accepted Answer · 2020-06-10 03:15:46Z

0

how about using @Input()fruit: string, stringify your selectedFruit

JSON.stringify(selectedFruit)

in details component parse it :

let parseFruit = JSON.parse(this.fruit); 
console.log(parseFruit);

answered Jun 10, 2020 at 3:15

Nicho

6061 gold badge11 silver badges26 bronze badges

Comments

dayanbeni · Accepted Answer · 2023-11-21 07:40:39Z

0

to my best knowledge and after hours of searching, all you need to do is to Declare any variable that you intend to use in your HTML at the class level of your component (where the export class definition at your type script)

I hope to hear it solved the problem to anyone Beni Dayan.

answered Nov 21, 2023 at 7:40

dayanbeni

112 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to resolve "property doesn't exists in type object" error in angular?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related