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.
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.
Let´s asume we have a basic angular scaffolding with a test-folder added. You can find and download it on my github here
As we see, once we create an angular project, it usually initializes a git repository, and node_modules folder is added to .gitignore by default. If we use visual studio code editor, the files or folders added to .gitignore are colored in grey.
Note: an empty folder will be nothing to git. That means, it has to contain at least one file in order git considers it has something that can be pushed.
This way, our remote version for this local project will be like this. No node_modules folder is pushed because it is specified on our .gitignore
But now we realized that, for some reason, we don’t want “test-folder” to be on our remote repository on github anymore; but we still need it on our local version, so we can´t simply delete it.
An option is add it on our .gitignore file
There we find the already ignored files by default, for example:
So, everything should be as easy as adding our test-folder to this file and the problem should be solved…
Unfortunately it is not so easy.
Despite you add this update your .gitignore and push the changes, test-folder will still be on your remote:
The thing is, .gitignore won´t delete the ignored files or folders from your remote repositoryif they are already there.
To achieve what we want, once the folder or file we want to ignore is added to the .gitignore file, we should move the folder or file we want to ignore outside of the project, and then add, commit and push new changes to the remote.
First, we will move it outside our local project
Once we add, commit and push changes, we can see it also disappeared from remote
Right now, we can move again our test-folder inside our project:
Did you notice? Despite we added the folder again, now the master branch acts like nothing new is added; that is because the test-folder is on the .gitignore file.
To test if it works, we will make a change on any other file, to push changes into the remote.
Something simple, for example change the site title on the main component of the app
Now you can see, after adding, committing and pushing changes, the test-folder has been successfully ignored.
EDIT: When you try to push changes, you could see something like this:
As explained here, that can happen if you made some changes on the remote branch which are still not done on the local branch. Foe example if you deleted already existing files on remote and added them to .gitignore on local branch.
You have 2 ways to solve it, as pointed on the link:
import new changes from REMOTE and merge it with your code and then push it to remote.
You can use this command to force changes to the server with the local repository (). remote repo code will be replaced with your local repo code.
git push -f origin master
With the -f tag you will override the remote branch code with your local repo code.
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:
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.
