Angular Javascript Typescript Useful software

How to see object properties on Angular templates

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 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:

GIF to illustrate how to navigate through an Object with custom Typescript interfaces and types 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:

GIF to show how to use advantages of Angular Language Service extension in our Angular templates

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:


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.