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…
> npm install -g angular-cli
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.
> ng new kendo-ui-first-look --style=scss
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.
> ng-serve
If you examine the terminal or command prompt, you can see Webpack doing its thing.
![its-webpack]()
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.
![where-is-it-running]()
And if you load that URL in your browser…
![kendo-ui-first-look]()
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.
> npm install bootstrap-sass --save
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.
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
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.
https://www.youtube.com/watch?v=J5Bvy4KhIs0
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!
![with-bootstrap]()
At this point, we could use any Bootstrap CSS component. Change the contents of app.component.html to the following:
<div class="container">
<div>
<h1>{{ title }}</h1>
</div>
</div>
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.
> npm login --registry=https://registry.npm.telerik.com/ --scope=@progress
Once you’ve logged in, you can install the Kendo UI Button component.
> npm install -S @progress/kendo-angular-buttons
Special thanks to @tj_besendorfer who pointed out that installing Kendo UI widgets while running `ng serve` can cause issues with files not being copied properly because they are in use. If you run into a an issue that looks somewhat like "The unmet dependencies are @progress/kendo-data-query@^0.2.0, and tslint@^3.0.0.", stop the development web server (ng serve) and then run `npm install` and then `ng serve` again.
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.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
// Import the Kendo UI Component
import { ButtonsModule } from '@progress/kendo-angular-buttons';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
// import the Kendo UI Component into the module
ButtonsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
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.
> npm install -S @telerik/kendo-theme-default
We can then include it in styles.scss the same way that we included Bootstrap.
/* Bootstrap CSS */
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
/* Kendo UI CSS */
@import "~@telerik/kendo-theme-default/styles/packages/all";
Now the button can be used in the app.component.html.
<div class="container">
<div>
<h1>{{ title }}</h1>
</div>
<div>
<button kendoButton [primary]="true" (click)="buttonClicked()">Don't Click Me!</button>
</div>
</div>
The button click event is bound to an event handler called buttonClicked. We need to add that event into the app.component.ts file.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app works!';
// Kendo UI Button click event handler
buttonClicked() {
alert("Clickity Clack!")
}
}
![clickit-clack]()
Let’s add another commonly used Kendo UI widget: the Kendo UI Dialog. This was previously known as the Kendo UI Window.
> npm install -S @progress/kendo-angular-dialog
Just like with the Kendo UI Button, import the Kendo UI Dialog component in the app.module.ts file.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
// Import the Kendo UI Components
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DialogModule } from '@progress/kendo-angular-dialog';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
// import the Kendo UI Components into the module
ButtonsModule,
DialogModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Add the markup for a Kendo UI Dialog component to the app.component.html file directly below the button.
<div class="container">
<div>
<h1>{{ title }}</h1>
</div>
<div>
<button kendoButton [primary]="true" (click)="buttonClicked()">Don't Click Me!</button>
</div>
<kendo-dialog title="Awesome title">
I am a super simple Kendo UI Dialog!
</kendo-dialog>
</div>
If you look at your app now, you will see the dialog component.
![simple-kendo-ui-dialog]()
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.
<div class="container">
<div>
<h1>{{ title }}</h1>
</div>
<div>
<button kendoButton [primary]="true" (click)="buttonClicked()">Don't Click Me!</button>
</div>
<kendo-dialog title="Awesome title" *ngIf="dialogOpen" (close)="dialogClosed()">
I am a super simple Kendo UI Dialog!
</kendo-dialog>
</div>
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.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app works!';
dialogOpen = false;
// Kendo UI Button click event handler
buttonClicked() {
this.dialogOpen = true;
}
dialogClosed() {
this.dialogOpen = false;
this.title = "Nice Job!";
}
}
![kendo-dialog]()
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 For Angular 2 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.
This post originally appeared on the Telerik Developer Network. Check it out for other great content.![]()
