Angular 7 @input property 'selected' does not exist on type '{}'

Question

I'm new to Angular. I want to ask about @Input("data") detailData = {}; in angular. When I console.log(detailData) it come out data like this.

Object { category: "dictionary", entityCategory: null, iconName: "dictionaryD", detail: {…}, key: "dictionary-7" }

And When I click button in console.log(detailData) it display like this

Object { category: "dictionary", entityCategory: null, iconName: "dictionaryD", detail: {…}, key: "dictionary-7", selected: true }

It mean, when I click button it add selected: true but when I console.log(detailData.selected) it come out

error TS2339: Property 'selected' does not exist on type '{}'.

What whould I do to make it work when I console.log(detailData.selected) it not come out error.

Add Component Code

    export class ResultDetailsComponent implements OnInit {


      @Input("data") detailData = {};
      @Output() expand = new EventEmitter();
      private expanded = false;
      constructor() {}
    // console.log(this.detailData)
      ngOnInit() {

       console.log(this.detailData)}
        if (detailData) {

          detailData.scrollIntoView()
         }
}

Note: But in HTML page when I {{detailData.selected}} it come out True

Hope you all can help me.

@rosiejaneenomar Thanks for your comment.. When I change to @Input() detaiData : any when console.log it come out undefined — Pravu

Muhammed Albarmavi Muhammed Albarmavi · Accepted Answer · 2019-09-06T03:35:33

it is just related to the type of detailData , when you set the detailData property without define the type of it typescript will inferred the type base of the value like a = 10 type of a will be a number but in here you set the value a empty object without any property so the type will inferred as empty object without any property set the type to any detail Data : any = {} will solve the problem or you can create an interface base of your structure or a class and at the declaration instantiate new object.

set the type to any

@Input("data") detailData : any = {};

set type to interface

export interface DataDetail {
  category?: string
  entityCategory?: string,
  iconName?:string, 
  detail?: any, 
  key?:string, 
  selected?:boolean
}

component

@Input("data") detailData : DataDetail = {};

Angular 7 @input property 'selected' does not exist on type '{}'

2 Answers