Working with 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 existing project: Learn in detail here
3. Use Ignite UI for Angular toolbox extension in Visual Studio Code.

In this post, we will follow steps by steps approach to work with Ignite UI for Angular toolbox extension.  You can learn more about 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 preform click on the Extensions in activity either bar or click shortcut key Ctrl+ Shift+ x

Clicking this will open search screen to search 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 speedup 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 HTML file and select option “Open Ignite UI Angular Toolbox” as shown in the image below:

You should get Ignite UI for Angular toolbox opened as shown in the image below:

Select a component to add.  Let us 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 following tasks for u

1. Installs all modules dependencies using npm
2. Import required modules for the added component to the application module or 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 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.