
If you enable it and go back to the HTML file, you’ll see if the name will populate in autocomplete list as soon as you start typing. You can use the Angular Language Service extension, which will add auto-completion. As an Angular developer, you want access to the inside of a template. In Angular, if you add a name to the app component and try to render it inside of the HTML template, VSCode won’t render the name to auto-completion out of the box and needs an extension for added functionality. The letters-u, i, o and p-are very close together to make it fast to switch between the individual files. The table above lists four keyboard-shortcuts to switch between CSS, HTML, the TS file for testing and the TS file of the component itself.

If you install this extension, you will get access to keyboard shortcuts to quickly navigate the individual files. For that, you have a useful extension called angular2-switcher.

When the application grows, you’ll be switching between these three files from the individual components a lot more. If you have an Angular CLI application running on your local host, in the app folder, you have the app component that is dynamically generated by the Angular CLI.Īs an Angular developer, you will be working on this component and quite often switching between the html, css, and the ts file.
