Wijmo has long had JavaScript/TypeScript IntelliSense in Visual Studio Code (and Visual Studio). In fact, Wijmo is written in TypeScript, so it was quite easy to get IntelliSense for our controls. But thousands of customers are using Wijmo in Angular applications, so they're declaring Wijmo controls in markup (HTML), not initializing them JavaScript.
We've heard from so many of you that you're using Angular and VSCode, so we spent the time to create very extensive IntelliSense for Wijmo’s Angular components. Luckily, VSCode is very extensible, just like Wijmo. So we were able to create smart IntelliSense, that includes declaring components, valid properties per control, valid values for native types, and even valid child components.
Let’s take a closer look at how you can use this new IntelliSense support in Wijmo.
Installing Wijmo’s IntelliSense for Angular
Before beginning, you'll need to download Wijmo and unzip its contents. Notice there's now an IntelliSense folder in the download.
Now, open Visual Studio Code and click the Extensions icon in the left side menu.
In the Extensions page, click the more button (…) and select “Install from VSIX”.
In the Open File dialog, navigate to the unzipped Wijmo download and into the IntelliSense directory. Choose the wijmo.intellisense.vscode.angular.html.vsix file and click the Open button.
After the extensions finishes installing, you'll need to reload VSCode. You should see a button titled “Reload Now” that you can click. If not, simply close and reopen VSCode.
That’s it! Now you're ready to use it.
Using Wijmo IntelliSense in an Angular Project.
At this point, you can simply create a new Angular project, add references to Wijmo and begin declaring components in markup. But let’s get a jump start by using an existing sample. Let’s open the HeaderFilters sample from the \samples\Angular2\ directory. This sample has one grid on it so it is simple. We'll try to recreate it with IntelliSense to see how much help we get.
Open this project using “Open Folder” in VSCode. We don’t need to spend time looking at how this entire application works. Let’s just start declaring components.
In the project explorer, open up the \src\app.html file. This is where the FlexGrid is already declared, and we'll try to replicate it.
Declaring a Component
Let’s start typing in a <wj- to start inserting our component. Notice that we immediately get an auto-complete list of all Wijmo Angular components. We could keep typing, or just select from the list to insert the FlexGrid.
Setting Properties
Next, we need to add properties to the component. If we hit space after <wj-flex-grid then we get a list of all valid properties, specific to the FlexGrid control. This is arguably the most valuable feature since it save tremendous amount of time looking through documentation to get the name/spelling right for properties.
Since we want to make only column headers visible, we know the property probably has “header” in the name. So let’s start typing <wj-flex-grid [header and see what we get. Notice that we get a list of all properties and events that have “header” anywhere in their name.
Some properties (with native Types) even have auto-complete for values. For example, isReadOnly is a Boolean. If we type <wj-flex-grid [isReadOnly]= IntelliSense offers two options: true or false.
Adding Child Components
Once we have the FlexGrid and all of its properties declared, we can add columns. Column are added as child components of FlexGrid. So inside of the
More Angular IntelliSense from the Angular Team
While it’s not required, we also find the Angular Language Service extension to be helpful. It provides some more convenient features when building Angular applications in VSCode. You can install it by opening the Extension pane and searching “Angular Language Service”.
Summary
We added IntelliSense to VSCode for Wijmo’s Angular components. You can get this feature by downloading Wijmo and installing the VSIX included. Once installed, you will get auto-complete for components, properties and some values. IntelliSense can save a lot of time and help you write code without going to the documentation. I hope you find this new feature as helpful as we do.
