In today's age speed is a thing. Speed is a necessity. In this blog i will tell you a secret to write angular code 10x faster ⏩ ⏩.
Prerequisites ❔
- 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 reusable 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 that generate Charts/ Graphs etc.
🙏 How VS-Code can help 🏁
When you are starting out on a new project or application, initially 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? ℹ️
- Open Visual Studio Code.
-
Open the desired project or workspace.
[Optional]
The second step is optional because some people prefer to create snippets which applies to a particular workspace or specific project.
-
Type
F1
on your keyboard and typeUser Snippets
-
Press
Enter
and vs code will prompt for selection of a language. Since we are developing snippets for Angular proceed to chooseHTML
Once you have selected
html.json
it will open a json file, in which we are going to make some changes.-
The syntax for the
snippet.json
will be something like this
{ "snippetName":{ "prefix":"your-shortcut-name", "body":[ // Your full HTML content to be inserted ] } }
Using the help of this syntax you can insert whatever you want to inside your HTML in an 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 bigger list since I am working on an enterprise application, we have a lot of sharable components that we tend to keep re-using.
I found this highly useful and improves our workflow and the way we write code. My team found it very useful.
If you are reading this, I hope this will definitely help you as well.
Happy coding 💥💥
Thanks for reading. 🙏 🙏
Stay tuned for more interesting stuffs 🔥🔥🔥🔥
Top comments (0)