2016-12-12

In August of this year, after a few months of hard work, we released Kendo UI For Angular 2 Beta. Since then we’ve been hard at work towards our Release Candidate slated for January. We’re very excited about these components, and we truly believe that some things – the very best things – are worth the wait.

Getting started with the new Angular 2 components is entirely different than it was with Kendo UI For jQuery. Just like all of you, I have to learn these strange new concepts and how to use Kendo UI in a brave new world of modules, directives and the like. I recently sat down for an afternoon with the beta components to see what it was like to get up and running with Kendo UI And Angular 2. This was my experience.

Choosing A Starting Point

One of the more difficult things about Angular 2 is just getting started. Gone are the days when we could just drop script tags in our page and be done. Angular 2 has many dependencies and needs a build step to bring together all of it’s own JavaScript, along with your JavaScript into something that is cross-browser compatible. Fortunately, there are a lot of great tools and starter kits out there. Unfortunately, they all use different module loaders and this means that how you get started with Kendo UI will vary depending on which module loader you use.

SystemJS vs Webpack

In the JavaScript bundler / module loader world, there are currently two primary contenders: Webpack, the industry darling that has been widely adopted by React developers; and SystemJS – a universal module loader that tries to be really good at just loading any type of JavaScript module, be it CommonJS, RequireJS or ES6.

Depending upon which starter kit you choose for Angular 2, you will be using either SystemJS or Webpack. The trouble is that you may not realize which one is being used straight away if you aren’t terribly familiar with either of these module loaders. That’s a problem because, when it comes to Kendo UI, Webpack works very well, and SystemJS requires a bit more configuration. And when it comes to configuration, here there be dragons.

That’s why after examining the myriad of excellent starter kits and GitHub project templates out there, I recommend that you use the Angular CLI with Kendo UI.

Angular CLI

The Angular CLI is the official tool for getting up and running with Angular 2 and it’s built by some great folks in the community in conjunction with the Angular 2 team. I officially recommend it for several reasons:

It generates what I believe to be the cleanest and simplest empty Angular 2 project;

It uses Webpack and does a great job of configuring almost all of it for you;

It has generators that you will definitely use since Angular 2 projects like to contain a LOT of files.

To install the Angular CLI, visit the docs and make sure you have the right versions of Node and npm installed. After that, it’s a simple matter of…

Note to Windows users: you will also need to have the C++ libraries installed with Visual Studio. If you do not have these libraries installed, simply try and create a new C++ project of any kind and Visual Studio will download and install them. They are huge. I am sorry.

Once the CLI is installed, you can create a new Angular 2 project with the ng command.

This creates a new Angular 2 project and then tells you that it is “Installing packages for tooling via npm”. It installs all of the generated project’s dependencies, which is a lot of packages. A lot. There are so many packages that it will take a non-trivial amount of time to complete this step, even on my Macbook Pro with an i7 and 16 gigs of RAM. This is something I’m hoping will get better as the CLI gets better and things like Yarn make me hopeful.

The –style=scss flag specifies that we want a new Angular 2 project with SASS support. SASS is a CSS pre-processor that makes it really easy to include and override external CSS frameworks such as Bootstrap.

Once the project is created, you can run it with the serve command.

If you examine the terminal or command prompt, you can see Webpack doing it’s thing.



At this point, the app is running, but how do you load it in your browser? If you scroll up just a bit in the terminal, you will see where it tells you the port on which the app is running.



And if you load that URL in your browser…



Awesome! Your app works. Or at least it says it does and computers don’t lie.

Let’s take a look at the project. Open up the directory where you created the project. Inside of that directory is a src folder. If you open up the app.component.ts file, you’ll see the Angular 2 component that has a property called title. This title property is bound in the app.component.html file with the syntax {{ title }}. If you were to change the value of title in app.component.ts, it will change the message that is displayed in the app without requiring a reload, so you can just leave this browser window running at all times.

Before we add Kendo UI to this application, we’re going to bring in Bootstrap as our CSS framework, since this is the framework that Kendo UI recommends and integrates seamlessly with.

Including Bootstrap

We’re going to include the SASS version of Bootstrap because the Angular CLI has tremendous SASS support built in and it makes it really easy to include third party CSS frameworks.

This will copy Bootstrap from npm into your node_models folder. What we need is the Bootstrap CSS. We can include this with an @import statement in the styles.scss file.

The first line sets the variable that points to the Bootstrap icon font. That variable is then used in the Bootstrap SASS file that is imported below. The Angular 2 CLI has all of the build steps for SASS already wired up, so this “just works”.

Note that when you write or include SASS in the styles.scss file, these styles are available to the entire application. Angular 2 has a feature called Style Encapsulation that allows you to specify styles that are restricted to one or more components, but not the entire application. This is a powerful feature and I encourage you to watch this short presentation from Justin Schwartzenberger which explains this in graceful detail.

If you look at the app now, it looks similar, but the font has changed since Bootstrap normalizes the basic CSS properties such as font. It already looks a lot better!

At this point, we could use any Bootstrap CSS component. Change the contents of app.component.html to the following:

Now let’s add a Kendo UI Button to this application. Of course, you could use a Bootstrap button here, but, for the sake of learning how we include Kendo UI, we’re going with a Kendo UI button. Besides that, the default theme for Kendo UI For Angular 2 is pretty amazing.

First, you are going to need to register the Kendo UI npm endpoint. This is going to ask you to login with your Telerik username and password as well as an email address. If you don’t have one, you can register for one here.

Once you’ve logged in, you can install the Kendo UI Button component.

If you get an installation failure during this step, it is likely because you are on Windows and do not have C++ support installed. To install it, just try and create any new C++ project from Visual Studio and it will prompt you to install the correct components.

This will install the Kendo UI Button component into the @progress folder in your npm_modules directory. In order to use this button, you need to import it into whatever module you want to use it with. In our case, we have only one module, the app.module.ts, so we’ll import it there.

Lastly, we need to include the CSS that the Kendo UI Button requires. The Kendo UI Default theme is delivered via a separate NPM package.

We can then include it in styles.scss the same way that we included Bootstrap.

Now the button can be used in the app.component.html.

The button click event is bound to an event handler called buttonClicked. We need to add that event into the app.component.ts file.

Let’s add another commonly used Kendo UI widget: the Kendo UI Dialog. This was previously known as the Kendo UI Window.

Just like with the Kendo UI Button, import the Kendo UI Dialog component in the app.module.ts file.

Add the markup for a Kendo UI Dialog component to the app.component.html file directly below the button.

If you look at your app now, you will see the dialog component.

It would be better if the button opened the dialog since that’s how we normally use them. To do that, we need to set the *ngIf property of the dialog to a boolean. This *ngIf is controlling the visibility of the dialog. So if we set that attribute to a property whose value is false, the dialog will not display. If we toggle it to true, the dialog pops up and the background goes dark. In this case, I have chosen the property dialogOpen, which hasn’t been created yet.

This means that our buttonClicked event simply needs to set a property called dialogOpen to true. The close event then toggles it back to false, and I’m changing the title property as well just to show off the binding of Angular 2.

You’re Ready To Go!

With that, we’ve got a functional Angular 2 application complete with Kendo UI And Bootstrap and you’re ready to build – well – anything!

The Kendo UI Beta features many of the most popular controls, including the Grid and Data Visualization. We’re on track for a Release Candidate in January which will include even more of your favorite components, with many more to come early next year. We know that you would prefer to have all of these components right now, and honestly, so would we! However, we have always believed in building the very best, and sometimes that takes more time than we would like, but we believe that it will be well worth the wait.

For more information, check out our official Getting Started Guide, as well as the Beta components and demos.

The post Using Kendo UI With Angular 2 appeared first on Telerik Developer Network.

Show more