Blog Developers

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

Dhananjay Kumar / Monday, July 30, 2018

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, 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 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 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 you:

  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.