Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

DZone's Guide to

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

A quick look at how to find and install this freely available extension via VS Code so you can start playing around with it in your Angular projects.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

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 detail here.
  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.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
ignite ui for angular ,web dev ,angular ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}