VS Code: 10 Very Useful Customized HTML Snippets for Angular Developers

If you are a Angular Developer and using Visual Studio Code as your IDE for the development then you might have used HTML snippets in your html to speed-up your development. These snippets are available on Visual Studio Market Place for example: Angular 2, 4 and upcoming latest TypeScript HTML Snippets. These snippets are really helpful and handy for daily development work especially when you want to write same kind syntax on regular basis.

When you are working on a large application then custized html snippets are really helpful because it saves your time and speed-up your development work.

If you are new to VS Code then probably there is a chance that you don't know that how to define your own customized snippets, but don't worry you can define your own customized snippets in VS Code if you want to do so.

In this post I will share 10 most useful my own customized snippets which I am using in my VS Code and trust me it will change the way you work before. These all customized snippets I often use in my daily development work.

Before sharing the list of my customized snippets let me show you how could you define your snippets in html.json

How to define customized snippets

Open your VS Code and got to File > Preferences > User snippets and select html.json from the drop down. See below screen shot for your reference:

In html.json you just copy paste example snippet below:

After above step save your html.json and go to any html type log now you'll notice that your snippets will appear and then you can select it. See screen shot below for your reference:

So what do you think... pretty easy ya. Now let's check my custized snippets list below:

1. Print to translate

This snippet is very useful when you are using translate module to translate every single string in your htmls. Without the snippet every time you have to write following code every time to translate the string and it's really a nightmare :(

{{ 'some.string.text' | translate }}

But after defining the below snippet your life become easy :)

2. Print double curly braces

In Angular development you have to use these double curly braces: {{ }} very often. So to easy life just use following snippet.

3. ngIf else

In Angular's latest version it allows you to use ngIf with else in the html itself if you want to use it in certain conditions. So use following snippet to save your time:

4. Button hidden

In some cases you have to use button with [hidden] attribute. So it's better to define in your snippet like below:

5. Form Input with formControlName

If you are using a form in your html then in every form input field you may add formControlName. So defining formControlName with input field in your snippet is good idea especially when you are working in large application. Check snippet below:

6. Form Input with minLength and maxLength

This is another instance of above snippet for form input field. Check below snippet:

7. HTML comment

This snippet is quite useful to print the HTML comment and I used often in my htmls and it is always recomended. Check below snippet:

8. Font Awesome Icons

You might have used Font Awesome icons in your application UI. So for me defining the snippet for the Font Awesome icons is really handy. Check below snippet for one icon and you could define multiples as per your requirement:

9. Print Form Values

If you are working with forms sometime you might need to print the form values for the debugging purpose. So defining it in snippet is good and like that. Check below snippet:

10. Print Form Status

This snippet is another reference of above snippet for debugging you might also need to print form status. So here is the last snippet you might like:

Here is the complete list in a single container:

I hope you would like to use all snippets mentioned above. If you think this post is really helpful for the developers then please let me know your opinion by leaving and comment below and share it in your social network.