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

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:

    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.

Categories
Angular Javascript Typescript Useful software

Move .ts files and automatically update imports with MOVE .TS

move-ts

Sometimes we find on our Angular projects, we have created a Component in the wrong place (for example outside Components folder). It can be a waste of time and effort to delete the older and create a new one, specially if we have already used it. Changing all the imports and references is also a work which can lead us to lots of errors, wasting, again, a lot of time to fix them.

To solve it we will use move.ts for visual studio code. This useful plugin for Visual Studio Code will allow you to move all your folders and automatically rename all the imports and references to the folder very easily. You just to make right click on the folder, look for the option “Move Typescript” and follow the instructions:

 

 

Categories
Useful software

Useful Software: Free File Sync

FreeFileSync-logo

This little program called Free File Sync  is a very useful tool when you have to back up your files or sync then between your home device (laptop…) and an external one like a USB.

You can configure it many ways. The Way I do to ensure my work is up to date on external devices is setting sync this way:

free-file-sync-settings

Sorry for the spanish.

All you have to do is click the green gear and customize it. Assuming “left” would be for example a folder on your laptop and right, a folder on your USB device, that would mean, from left to right:

  • First green arrow means “is the element exists only on the left sid, then add it to the right”
  • Second arrow means “element exists on both sides but version on the left side is more recent, then update the element on the right side”
  • Third orange thunder means “when there is a conflict, leave it unresolved” (dont´t know what exactly means, but I guess is better let it so than corrupting a file on any of the side, and it always worked for me).
  • Grey hyphen of 4th position means “if the element exists on both sides but the right element is more recent, then do nothing”.
  • And the byn means “if the element exists only on the right side, remove it from right side”. It makes sure then that if I delete a file on my laptop, it would be also deleted on my USB.

Remember you can check what each action does depending on each case (listed on the upper row) and adapt it to your own preferences.