The Angular Language service is an IDE extension that allows code editors to get helpful tips, code completion, navigation and more inside angular templates and now we’re unleashing the power of ivy to help boost your developer velocity when using the language service plugin.

Let’s take a few minutes to get familiar with the extension.

Install Angular Language Service using Extension in VS Code

Syntax Highlighting:

Let us look at some of the features provided by Angular language service. First up is syntax highlighting. Templates now have meaningful extended syntax highlighting of angular specific code and constructs. And what’s great is that it works with inline templates and external templates.

Go To/ Peek Definition:

Next, we’ll go to definition feature where you can quickly navigate to your templates and stylesheets from inside your component class with right click and select Go to Definition. Another alternative is to use Vs Code’s peak definition feature from within your templates (both inline and external). You’ll be treated to a pop-up containing the code for that symbol and you can actually edit it.

Navigation with and without angular language service.

Type Details on Hover:

Here’s another great feature. You can get type information when hovering over the symbols in your templates. Ivy is providing more accurate type information for different symbols and generic see a boost here as well. The language service provides auto-completion in your templates and with the power of ivy you’ll see this worked better for your complex types.

Apart from these we have some other new features as well.  You can enjoy real-time diagnosis with parody of the compiler. Another great new feature is that you can now see symbol references directly from your templates.

That’s a ton of value packed into this plugin. Hope it was helpful. References:

https://blog.angular.io/under-the-hood-of-the-language-service-ab763c26f522

https://medium.com/@rafayjamal/template-saver-angular-language-service-vs-code-5039284be47a