--- title: "Introducing Syncfusion Angular Code Snippets for Visual Studio Code" published_at: "2021-10-06T11:00:38+00:00" modified_at: "2026-01-15T14:49:15+00:00" url: "https://www.syncfusion.com/blogs/post/syncfusion-angular-code-snippets-for-visual-studio-code" excerpt: "We are glad to introduce Angular Snippets, a utility for adding Syncfusion Angular components in the HTML file of an Angular application. This utility is available in our 2021 Volume 3 release. This code snippet utility saves significant time for..." taxonomy_category: - "Angular" - "Visual Studio Code" taxonomy_post_tag: - "Angular" - "extension" - "productivity" - "Visual Studio Code" - "Web Development" --- # Introducing Syncfusion Angular Code Snippets for Visual Studio Code [Ganesan Rengasamy](https://www.syncfusion.com/blogs/author/ganesan-rengasamy) ![Introducing Syncfusion Angular Code Snippets for Visual Studio Code](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Introducing-Syncfusion-Angular-Code-Snippets-for-Visual-Studio-Code.png) We are glad to introduce [Angular Snippets](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Web-VSCode-Extensions) , a utility for adding Syncfusion [Angular components](https://www.syncfusion.com/angular-ui-components) in the HTML file of an Angular application. This utility is available in our [2021 Volume 3](https://www.syncfusion.com/forums/169291/essential-studio-2021-volume-3-main-release-v19-3-0-43-is-available-for-download) release. This code snippet utility saves significant time for developers in adding Syncfusion Angular components to their projects. In this blog, I am going to explain how to use the new code snippet utility to add Syncfusion Angular components to your applications. ## Prerequisites - [Visual Studio Code](https://code.visualstudio.com/download) - [Angular 4 or above](https://angular.io/) - [TypeScript 2.6 or above](https://www.typescriptlang.org/) - [C# extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp) ## Install Syncfusion Angular Snippets The Syncfusion Angular Snippets utility is included as part of [Syncfusion Web VS Code extensions](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Web-VSCode-Extensions) . ### **Installing from Visual Studio Marketplace** To install the **Syncfusion web VS Code extensions** from Visual Studio Marketplace, follow these steps: 1. Open Visual Studio Code. 2. Then, navigate to **View** > ** Command Palette**. 3. Search for **Install Extensions** in the ** Command Palette** and expand it when it appears. 4. Search for **Syncfusion Web** in the search box to locate the ** Syncfusion Web VS Code Extension** package. 5. Then, install the **Syncfusion Angular extension.** ### **Installing from a VSIX package** To install the **Syncfusion web VS Code extensions** from a VSIX package, follow these steps: 1. First, download the [Syncfusion web VS Code extensions](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Web-VSCode-Extensions) from the Visual Studio Marketplace. 2. Then, open **Visual Studio Code**. 3. Navigate to **View** > ** Command Palette**. 4. Search for **Install**, and then click ** Install from VSIX** in the Command Palette. 5. Finally, select the **Syncfusion web VS Code extension** from the ** Browse** options. The extension will be installed. ## Adding Syncfusion Angular components using the code snippet utility Now, follow these steps to add a Syncfusion Angular component to an Angular app using the code snippet utility: 1. Open an existing Angular app or create a new one in Visual Studio Code. 2. Then, open the required HTML file. 3. Now, start typing in the name of a Syncfusion Angular component, which will begin with **ejs**. As you type in the name, you will see a list of components along with their features in the following format:*** ejs--***** For example:** ejs-grid-grouping.Choose a Syncfusion component-feature pair and press ** Enter** or the ** Tab** key. The Syncfusion Angular component, along with the code to use the feature, will be added to the .html file. ![Adding Syncfusion Angular components using the code snippet utility](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Adding-Syncfusion-Angular-components-using-the-code-snippet-utility.gif) 1. After adding the Syncfusion Angular component code to the HTML file, use the **tab key** to fill the required values to render the component. The help link at the top of the added code snippet will take you to the documentation page to learn more about the added component feature. ![Use the help link to learn more about the Angular components](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Use-the-help-link-to-learn-more-about-the-Angular-components.png) ## Configure the Angular application The Syncfusion Angular code snippet utility only adds the code snippet to the HTML file. So, we need to install the required Syncfusion NPM packages and add component modules and themes to use the component. To do so, follow these steps: 1. Open the Angular package.json file and manually add the required Syncfusion Angular individual NPM package(s) for the Syncfusion Angular components. 2. Then, in the command prompt, navigate to the packages.json file location and run the ***npm install*** command to restore all the Syncfusion Angular NPM packages. ![Syncfusion Angular components added in the pacakge.json file](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Syncfusion-Angular-components-added-in-the-pacakge.json-file.png) 3. Then, open your module file and add the required Angular component module entries to render the Syncfusion components in your app. ![Add the required Angular component(s) module entries](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Add-the-required-Angular-components-module-entries.png) 4. Now, add the Syncfusion Angular theme entry in the **style.**** css** file. ![Add the Syncfusion Angular theme entry in the style.css file](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Add-the-Syncfusion-Angular-theme-entry-in-the-style.css-file.png) 5. Finally, run the application to see the Syncfusion Angular components. ## Special mention: Syncfusion® Document Viewer Extension If you often find yourself switching between apps just to check a Word or Excel file, this handy tool is for you. The [Syncfusion® Document Viewer Extension](https://www.syncfusion.com/free-tools/document-viewer-extension) for Visual Studio Code lets you open and view documents like Word, Excel, and more; right inside your coding environment. You can preview high-fidelity files and even make light edits such as text changes and formatting tweaks, all without leaving VS Code. It’s a simple way to stay focused and keep your project documentation within reach. Available for free download on the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Document-Viewer-VSCode-Extensions) . ## Conclusion Thanks for reading! I hope this blog helps you use our code snippet utility to add Syncfusion Angular components to your Angular app in less time. This utility is available in our [2021 Volume 3](https://www.syncfusion.com/forums/169291/essential-studio-2021-volume-3-main-release-v19-3-0-43-is-available-for-download) release. See details in our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v19.3.0.43) and [What’s New](https://www.syncfusion.com/products/whatsnew) pages. The Syncfusion [Angular UI components](https://www.syncfusion.com/angular-ui-components) library is the only suite that you will ever need to build an application. It contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package. Try them out and build elite web applications! If you have any questions, please let us know in the comments section below. You can also contact us through our [support forum](https://www.syncfusion.com/forums/blazor-components) , [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents/newincident) , or [feedback portal](https://www.syncfusion.com/feedback/blazor-components) . We are always happy to assist you! ## Related blogs - [15 Best Visual Studio Code Extensions for Web Developers in 2021](https://www.syncfusion.com/blogs/post/15-best-visual-studio-code-extensions-for-web-developers-in-2021.aspx) - [10 Tricks Every Developer Should Know in Visual Studio Code](https://www.syncfusion.com/blogs/post/10-tricks-in-visual-studio-code.aspx) - [How to Customize the Angular Tree Grid by Creating Reusable Components](https://www.syncfusion.com/blogs/post/customize-angular-tree-grid-by-creating-reusable-components.aspx) - [Entering Invalid Dates Is Not Possible Anymore in Angular Apps](https://www.syncfusion.com/blogs/post/entering-invalid-dates-is-not-possible-anymore-in-angular-apps.aspx)