UPDATE OCTOBER 2022: If you are using Visual Studio Code sometimes you could find you should restart IDE to be able to access object´s properties on the template.
Recently we have discussed about how to create custom Typescript interfaces with quicktype.io. In this article we will learn how to see object properties on Angular templates.
One of the advantages of creating our custom Typescript interfaces is, Typescript can infer an object´s properties this way:
It would be great if we could do the same in our templates, isn´t it? Fortunately, there is a way, installing Angular Language Services, a Visual Studio Code extension.
With it, you could have the same feature for your Angular templates. This way you could so something like this, which is extremely useful, as you can see:
Just a note: to make this work, Typescript must know the specific type of the property. In our case, APIdata will contain an array of Datum type objects, so we must declare and initialize this way:
public APIdata:Datum[];
And inside the constructor:
this.APIdata=[];
If you do something like declaring the property with an any type, it won´t work.
See more of our Angular or Typescript related articles.
