Write Angular code 10x faster

In today’s age speed is a thing. Speed is necessity. In this blog i will tell you a secret to write angular code 10x faster .

Pre requisites

• Visual Studio code
• You should be working in Angular

If you are not having VSCode, you can download it here for free.

Angular & Component sharing

In angular we can have multiple re-usable components. Eg: You can create the below list of components which are commonly used across the application and it enables sharing and faster development.

Some of the commonly used components like

• Blade
• Modal
• Any common filters used across the application.
• Shared components which generates Charts/ Graphs etc.

How VS-Code can help

When you are starting out on a new project or application, initally we will focus on getting the common components out first. Once we have developed the common components,we can easily keep on re-using it across the entire application.

Let’s say we need blade on multiple areas of the application. While development instead of typing the entire snippet, we can make vscode to automatically insert the whole component html code for us.

How to create snippets ?

1. Open Visual Studio Code.

2. Open the desired project or workspace. [Optional]

   The second step is optional because, some people prefer to create snippets which applies to particular workspace or specific project.

3. Type F1 on your keyboard and type User Snippets

   

4. Press Enter and vs code will prompt for selection of language. Since we are developing snippets for Angular proceed to choose HTML

   

5. Once you have selected html.json it will open a json file, in which we are going to make some changes.

6. The syntax for the snippet.json will be something like this

   {
       "snippetName":{
           "prefix":"your-shortcut-name",
           "body":[
           // Your full HTML content to be inserted
           ]
       }
   }

7. Using the help of this syntax you can insert whatever you want to inside your HTML in a efficient and fastest way.

NOTE : Each line inside the body[] should be enclosed within "" string notation.

My snippet shortcuts

Here are my top snippets for creating something very quickly.

Blade

"app-blade": {
		"prefix": "blade",
		"body": [
			"<app-blade>",
			" <div bladeHeader>",
			" </div>",
			" <div bladeContent>",
			" </div>",
			" <div bladeFooter>",
			" </div>",
			"</app-blade>"
		]
	}

Kendo Grid

{
    "KendoGrid": {
		"prefix": "k-grid",
		"body": [
			"<kendo-grid [data]=\"data\"",
			"            [filterable]=\"true\"",
			"            [pageSize]=\"10\"",
			"            [skip]=\"0\"",
			"            [kendoGridSelectBy]=\"'id'\"",
			"            [selectedKeys]=\"selectedKeysIndexes\"",
			"            [resizable]=\"true\"",
			"            [sortable]=\"true\">",
			"",
			"</kendo-grid>"
		],
		"description": "KendoGrid"
	}
}

I have a much more bigger list since i am working on a enterprise application, we have lot of sharable components which we tend to keep re-using.

I found this highly usefull and improves our workflow and the way we write code. My team found it very useful.

If you are reading till this, i hope this will definitely help you as well.

Happy coding

Thanks for reading. Stay tuned for more interesting stuffs