Language services include below services

Autocompletion

Autocompletion will provide suggestions with contextual possibilities and hints as we type so it can speed up our development time. This example shows autocomplete in an interpolation. As you would see suggestions, you can hit the tab to complete.

There are also completions within elements. If any elements we have as a component selector will show up in the completion list.

Autocompletion provides us with contextual possibilities and hints as you type so it can speed up your development time. For example, below code, shows autocomplete in an interpolation. This shows when you type it out, you can hit the tab to complete.

Error checking

The Angular Language Service can also warn you of mistakes in your code. We do not have any plugin or service which can tell us about a possible error in a template file. This service will help in our project to avoid mistakes as it shows the possible error while writing the code. For error in a JavaScript or Typescript file, we use VS Code and it has many plugins which can show possible errors.

Navigation

Navigation allows you to hover to see where a component, directive, module, etc. are placed. It is used by a mouse hovering on it and then click and press F12 to go directly to its definition.

Now, lets see with an example of Go To Definition or Peek Definition in the context menu of VS Code over a property in the template.

Now, we see how to install the Angular Language Service in any of these three IDEs.

A.Sublime Text

In we install the service in simple ways which is given below:

First, you need an extension to allow Typescript. For that you need to install the latest version of TypeScript in your local node_modules directory as shown below:

Install the Angular Language Service package in local_module directory:

TypeScript 2.3 has a language service plugin model that the language service can use.

Next, in your user preferences (Cmd+, or Ctrl+,), add:

Installing in your project

We can also install Angular Language Service in our project with the npm command as shown below:

Now additionally, you have to add the following to the "compilerOptions" section of tsconfig.json file of our project.

Note that this only for providing diagnostics and completions in .ts files. If you want completions in HTML files, then you need a custom sublime plugin (or modifications to the current plugin) for completions in HTML files.

Once the package is installed, add the following code block in your tsconfig.json file for the “compilerOptions” section.

Inside the tsconfig.json, add the following code block as given below:

In your editor’s user preferences (Cmd+, or Ctrl+,), add the following:

Sublime Text User Preferences

This will help us allows the Angular Language Service to provide diagnostics and completions in .ts files.

B. Webstorm

In webstorm, first, you have to install the angular language service as a form of dev dependency. Once you complete the installation process then Angular sees this dev dependency and then it provides the language service inside of WebStorm. Webstorm gives you colorization inside the template and in addition, it also provides autocomplete to the Angular Language Service.

Heres the dev dependency code block you need to have in package.json:

Then you can install the devDependencies with npm or yarn in the terminal window at the root of your project as shown below:

 

C. Visual Studio Code

Angular developer also uses Visual Studio Code as a code editor, you should use the Angular Language Service extension for VS Code. This extension work in both inline and external templates for provides us rich editing and Intellisense.

For that, make sure you have installed the latest VS Code version, then download the latest version from the ng language service releases page (the assets section). Open VS Code editor and click on the extensions tab, then click on above three dots and select Install from VSIX option from them.

Now, it will open file manager and from here you have to choose the file location where you downloaded the release file.

After installation, VS Code will prompt you to reload the app as download and installation have been completed.

If you open any Angular project now, you can see the language service is working. Lets check it, hover over a bound property and the definition appeared like this.

You can also install angular language service manually in the CLI by using this command:

We can also install Angular Language Service from the store, which is accessible from the bottom icon on the left menu pane. You can also use the VS shortcut CTRL+P to search for the extension. When opened it, enter the following command: ext install Angular.ng-template

Then click install button to install the Angular Language Service.

How to install?

From Visual Studio | Marketplace

you can download it from visual studio code marker place

You can download in VS Code from vs code’s extension tab as shown below.

After install just reloads the project.