Working With the Ignite UI for Angular Toolbox Extension in Visual Studio Code

Ignite UI for Angular is 50+ Material-based UI components to help you build enterprise Angular application faster. Learn more about Ignite UI for Angular here .

You can add Ignite UI for Angular in your project in various ways:

1. Use Ignite UI CLI: Learn more about Ignite UI CLI here .
2. Use npm to add Ignite UI in an existing project: Learn in detailhere.
3. Use the Ignite UI for Angular toolbox extension in Visual Studio Code.

In this post, we will follow a step-by-step approach to working with the Ignite UI for Angular toolbox extension. You can learn more about the extension here . It allows you to add Ignite UI for Angular components easily to the template.

Let us start with browsing for the extension. To browse extensions, click on the Extensions in activity either bar or click shortcut key Ctrl+ Shift+ x.

Clicking this will open the search screen to search for an extension in marketplace. In the search box, enter text, "Ignite UI," and, as a result, you will find two results:

1. Infragistics Ignite UI for Angular Tooltips.
2. Infragistics Ignite UI for Angular Toolbox.

Feel free to install both extensions to speed up the Angular development process with Ignite UI for Angular components. To install, just click on the Install button.

Now, to add any Ignite UI for Angular component, right click on the HTML file and select the option, "Open Ignite UI Angular Toolbox," as shown in the image below:

Ignite UI for Angular toolbox should now be opened, as shown in the image below:

Select a component to add. Let's say we want to select Grid. Double click on Grid and Ignite UI will start installing all the dependencies and will add reference code. Essentially, it does the following tasks for you:

1. Installs all module dependencies using npm.
2. Imports the required modules for the added component to the application module or the next available module.
3. Creates reference code.

You can verify that it has added Ignite UI for Angular Grid modules in app.module as shown in the image below:

And on the HTML it has added a reference code as shown in the image below:

In this way, you can work with Ignite UI for Angular Toolbox. Please give a try and let us know your feedback.