Our customers enjoy building a good UI for their projects. They rely on Kendo UI to deliver an outstanding development experience along with the most popular JS framework of the modern web – Angular. Kendo UI for Angular is a professionally developed library distributed under a commercial license.

Some of them are not sure how to get started with Kendo UI for Angular. In the post below we detail how you can start using Kendo UI with Angular and include a Chart control:

First Step => Setting up the angular project

The easiest way to start with Angular is to use the Angular CLI Tool. To scaffold your project structure, follow its installation instructions.

npm install -g @angular/cli
ng new my-first-angular-project
cd my-first-angular-project

Second Step => Activate your Trial or commercial License

Starting from December 2020, using any of the UI components from the Kendo UI for Angular library requires either a commercial license key or an active trial license key.

After login in your telerik account Download your Telerik license key Next, save the kendo-ui-license.txt license key file in the project folder.

Install or Update a License Key

• Copy the license key file (kendo-ui-license.txt) to the root folder of your project. Alternatively, copy the contents of the file to the KENDO_UI_LICENSE environment variable.
• Install @progress/kendo-licensing as a project dependency by running npm install --save @progress/kendo-licensing or yarn add @progress/kendo-licensing.
• Run npx kendo-ui-license activate or yarn run kendo-ui-license activate in the console.

Adding the Kendo UI Components

Kendo UI for Angular is distributed as multiple NPM packages scoped to @progress. For example, the name of the Grid package is @progress/kendo-angular-grid. As of the Angular 6 release, Angular CLI introduces the ng add command which provides for a faster and more user-friendly package installation. For more information, refer to the article on using Kendo UI for Angular with Angular CLI.

1. Let’s start and add the Charts package:

Angular CLI supports the addition of packages through the ng add command which executes in one step the set of otherwise individually needed commands.

ng add @progress/kendo-angular-charts

The command installs all necessary packages, sets up the default theme, and imports the component module. The full set of applied changes can be seen by running git diff at any time.

Manual Setup

All components that you reference during the installation will be present in the final bundle of your application. To avoid ending up with components you do not actually need, either:

• Import all Charts components at once by using the ChartsModule, or
• Import a specific Charts component by adding it as an individual NgModule.

Download and install the package.

npm install --save @progress/kendo-angular-charts @progress/kendo-angular-common @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-angular-popup @progress/kendo-drawing hammerjs @progress/kendo-licensing

Once installed, import Hammer.js and the NgModule of the components you need.

To get all package components, import the ChartsModule in your [application root]({{ site.data.url.angular[‘ngmodules’] }}#angular-modularity) or feature module in app.module.ts.

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { ChartsModule } from '@progress/kendo-angular-charts';
    import { AppComponent } from './app.component';

    import 'hammerjs';

    @NgModule({
        bootstrap:    [AppComponent],
        declarations: [AppComponent],
        imports:      [BrowserModule, BrowserAnimationsModule, ChartsModule]
    })
    export class AppModule {
    }

and Use Chart in app.component.js

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template:'<kendo-chart>
  <kendo-chart-title text="Units sold"></kendo-chart-title>
  <kendo-chart-category-axis>
      <kendo-chart-category-axis-item [categories]="['Q1', 'Q2', 'Q3', 'Q4']">
      </kendo-chart-category-axis-item>
  </kendo-chart-category-axis>
  <kendo-chart-series>
    <kendo-chart-series-item type="bar" [gap]="2" [spacing]=".25" [data]="[100, 123, 234, 343]">
    </kendo-chart-series-item>
    <kendo-chart-series-item type="bar" [data]="[120, 67, 231, 196]">
    </kendo-chart-series-item>
    <kendo-chart-series-item type="bar" [data]="[45, 124, 189, 143]">
    </kendo-chart-series-item>
    <kendo-chart-series-item type="bar" [data]="[87, 154, 210, 215]">
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>',
 
})
export class AppComponent {
  title = 'chart-sample';
}

Kendo UI for Angular provides themes that you can use to style your application.

Currently, the suite ships the following themes:

• Kendo UI Default theme—The theme package is available through the @progress/kendo-theme-default NPM module.
• Kendo UI Bootstrap theme—The theme package is available through the @progress/kendo-theme-bootstrap NPM module.
• Kendo UI Material theme—The theme package is available through the @progress/kendo-theme-material NPM module.

Let us know your experience getting started with Kendo UI in Angular…

In our quest to beautify the web, we present more “cool” UI available for the plain & humble Kendo UI button. Kendo UI provides four types of buttons:

1. Button
   You can use Kendo button in your application. To learn how, follow my previous article :
   Beautiful Buttons with Kendo UI in Angular v5 app
   
2. ButtonGroup
   
3. DropDownButton
   
4. SplitButton
   

This post will cover the “ButtonGroup” control.

ButtonGroup

ButtonGroup is a collection of two or more Buttons.  Some features of this:

1. Each button in the ButtonGroup can be separately configured depending on the requirements of your project.
2. You can use any type of button in a ButtonGroup, like Button, Icon Button, or Image Button. Again, it depends on your project requirement.
   
3. Kendo UI ButtonGroup also gives you selection modes. By default, it is Multi-selection with an option to change it into single mode.
   

For using Kendo UI buttons, you need to install Kendo in your Angular application. To learn the process of installation, follow my previous article and make your Angular app ready.

Power up your Angular 5 Application with Kendo UI

When ready with your Angular v5 app along with Kendo UI Buttons module, follow the following process.
Let us use three Kendo buttons in our app like this (output would be like the image):

kendoButton>Yes
kendoButton>No
kendoButton>Cancel

Now, if you need to use ButtonGroup, then write –

as Angular Directive for binding more than one buttons in a group.

kendoButton >Yes
kendoButton >No
kendoButton >Cancel

Now, serve your Angular app with “ng serve –open” again and see the difference in output:

This looks much better as a ButtonGroup.

If you select or click any button, it is not immediately visible  which button was selected. To include this important functionality, you can use toggable property of kendoButton and make it “true”:
[togglable]=“true”

The code now looks like the following:

kendoButton [togglable]=“true”>Yes
kendoButton [togglable]=“true”>No
kendoButton [togglable]=“true”>Cancel

Now, if you click any button in ButtonGroup, it’ll be in selected mode.

Icon buttons in ButtonGroup
Let’s further improve this by including an icon with the button. Here is an example of how you can use Icon button in ButtonGroup:

kendoButton [togglable]=“true” [icon]=“‘check'”>Yes
kendoButton [togglable]=“true” [icon]=“‘cancel'”>No
kendoButton [togglable]=“true” [icon]=“‘close'”>Cancel

The result is much better with visual cues as follows: 

Here are some more icons available for Kendo UI Icon buttons.
https://www.telerik.com/kendo-angular-ui/components/styling/icons/#toc-actions

Kendo UI ButtonGroup Selection Mode:

Using Selection mode, you can restrict the number of buttons that can be selected in a ButtonGroup. By default, the selection mode of the ButtonGroup is set to multiple. If you want to select one at the time, set selection to single.
[selection]=“‘single'”

Use this code.
<kendo-buttongroup [selection]=“‘single'”>
kendoButton [togglable]=“true” [icon]=“‘check'”>Yes
kendoButton [togglable]=“true” [icon]=“‘cancel'”>No
kendoButton [togglable]=“true” [icon]=“‘close'”>Cancel


Again, serve your Angular App (ng serve –open). Now, user can select only one option at a time.

Disabled ButtonGroup

You can enable or disable the ButtonGroup or an individual button in a ButtonGroup for Angular App.

“disable” is a property for both, ButtonGroup or button. Set “disable” to “true” if you want to disable a ButtonGroup. By default, Kendo UI ButtonGroup sets it to “false” that’s why all the buttons in a group are enabled.

To disable a specific button, set its own disabled attribute to true and leave the disabled attribute of the ButtonGroup undefined. If you define the disabled attribute of the ButtonGroup, it will take precedence over the disabled attributes of the underlying buttons and they will be ignored.

[disabled]=“true”

Example:

Here are two ButtonGroups in which I used “disable” for ButtonGroup level and also for individual button.

<kendo-buttongroup [selection]=“‘single'” [disabled]=“true”>
kendoButton [togglable]=“true” [icon]=“‘check'”>Yes
kendoButton [togglable]=“true” [icon]=“‘cancel'”>No
kendoButton [togglable]=“true” [icon]=“‘close'”>Cancel



<kendo-buttongroup [selection]=“‘single'”>
kendoButton [togglable]=“true” [icon]=“‘check'”>Yes
kendoButton [togglable]=“true” [icon]=“‘cancel'” [disabled]=“true”>No
kendoButton [togglable]=“true” [icon]=“‘close'”>Cancel

Watch the output:

Toggle Disabled

You can toggle “disabled” property at run time using component of Angular app. Edit your “app.component.ts” or any component code file where you want to write the function to toggle disable.

export
class AppComponent {
public isDisabled: boolean = true;
public toggleDisabled(): void {
this.isDisabled = !this.isDisabled;

}

}

Now, create a new kendoButton in the app where you want to bind this function.

<button
kendoButton (click)=“toggleDisabled()” [primary]=“true”>Toggle Disabled

And set [disabled]=“isDisabled” in HTML view. Like:

<kendo-buttongroup [selection]=“‘single'” [disabled]=“isDisabled”>

kendoButton [togglable]=“true” [icon]=“‘check'”>Yes

kendoButton [togglable]=“true” [icon]=“‘cancel'”>No

kendoButton [togglable]=“true” [icon]=“‘close'”>Cancel

<kendo-buttongroup [selection]=“‘single'”>
kendoButton [togglable]=“true” [icon]=“‘check'”>Yes
kendoButton [togglable]=“true” [icon]=“‘cancel'” [disabled]=“isDisabled”>No
kendoButton [togglable]=“true” [icon]=“‘close'”>Cancel

<button
kendoButton (click)=“toggleDisabled()” [primary]=“true”>Toggle Disabled

Click on the button to Disable Toggle.

After clicking on “Toggle to Disabled”, your all disabled ButtonGroups or Buttons will be enabled.

Hope you enjoyed reading this article. Stay tuned for next one on “Kendo UI Dropdown Button”.

You may have used CSS for styling your buttons. Here is an easy solution to make your application buttons more effective and user-friendly without the hassle of CSS, i.e., Kendo UI Buttons. These buttons provide a clickable UI functionality with arbitrary content.

For using Kendo UI buttons, you need to install Kendo in your Angular application. To learn the process of installation, follow my previous article and make your Angular app ready.

Power Up your Angular 5 Application with Kendo UI

Kendo provides four types of buttons:

1. Button
2. ButtonGroup
3. DropDownButton
4. SplitButton

Example:

To get all the package components, import the ‘ButtonsModule’ in your application root module, like in this code:

imports: [

BrowserModule,

FormsModule,

HttpModule,

// Register the modules

BrowserAnimationsModule,

ButtonsModule

]

The package also exports the following modules for individual components:

• ButtonModule
• ButtonGroupModule
• DropDownButtonModule
• SplitButtonModule

Button:

Button is an Angular directive which detects user interaction and triggers a corresponding event. In Kendo UI Button, we have some wonderful features:

1. Default Button
   

For example, I need to use a button for selecting a file from my local computer, so I can use this button with only text (which is the default type), or with text and icon, or may be with only folder icon without text.

Then, select a button acording to your need :

1. Only Text : <button
   kendoButton>Open</button>
   
2. Text with Icon: <button
   kendoButton [icon]=“‘folder'”>Open</button>
   
3. Only Icon: <button
   kendoButton [icon]=“‘folder'”></button>
   

1. Bare Button
   

you just need to use [look] property of kendo UI Buttons and change it to ‘[look]=bare’.

Examples:

1. Only Text : <button
   kendoButton [look]=“‘bare'”>Open</button>
   
2. Text with Icon: <button
   kendoButton [icon]=“‘folder'” [look]=“‘bare'”>Open</button>
   
3. Only Icon: <button
   kendoButton [icon]=“‘folder'” [look]=“‘bare'”></button>
   

1. Flat Button
   

Again, just change the [look] property to ‘flat’ like ‘ [look]=”‘flat'” ‘. The bare and flat buttons look almost same but select or mouse hover styles are a little bit different.

Examples:

1. Only Text : <button
   kendoButton [look]=“‘flat'”>Open</button>
   
2. Text with Icon: <button
   kendoButton [icon]=“‘folder'” [look]=“‘flat'”>Open</button>
   
3. Only Icon: <button
   kendoButton [icon]=“‘folder'” [look]=“‘flat'”></button>
   

1. Outline Button
   

Outline Button is used to have a button with in-built border style. Change your [look] property to ‘outline’.

Examples:

1. Only Text : <button
   kendoButton [look]=“‘outline'”>Open</button>
   
2. Text with Icon: <button
   kendoButton [icon]=“‘folder'” [look]=” ‘outline'”>Open</button>
   
3. Only Icon: <button
   kendoButton [icon]=“‘folder'” [look]=” ‘outline'”></button>
   

More Features and Functionalities of Kendo UI Buttons:

• Disabled Button
  

To make any button Disabled, set the disabled property to true only.

Examples:

<button
kendoButton [disabled]=“true”>Save</button>

You can use the same property with any type of buttons.

• Icon Button
  

You can create your buttons more user-friendly by adding image, predefined, or custom icons to it. The button provides three properties for it:

1. icon: For using the built-in Kendo UI icons, Like Folder, Open Folder, and more.

   <button
   kendoButton [icon]=“‘calendar'”>Events</button>
   

2. iconClass: Adding FontAwesome and other font icons from required third-party CSS classes, use iconClass property.

   CSS URL

   <link
   rel=“stylesheet”
   href=“https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css&#8221;>
   

   Using in Button
   

   <button
   kendoButton [iconClass]=“‘fa fa-calendar fa fw'”> Events</button>
   

3. imageURL: for using third-party images as icon from a specified URL.
   

   <button
   kendoButton [imageUrl]=“‘https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png'&#8221;>Snowboarding</button>
   

   Your buttons must be like this:

   

• Primary Button
  

  The Button enables you to highlight the actions to the user by enhancing its appearance.

  For making any type of button as Primary, set the primary property to true. Like:

<button
kendoButton [primary]=“true”>Open</button>

And your output will be like:

• Toggleable Button
  

  Toggleable Button enables you to indicate whether it is active or inactive. To get this behavior, use the togglable property and set it to true.

<button
kendoButton [look]=“‘bare'” [togglable]=“true”>Submit</button>

See the output when it’s in Inactive mode:

Active:

Manage Events of Kendo UI Buttons:

If you need to manage your events in Kendo Button, just write your event name in small brackets (), with event name, like if you need to use Click event then write like this:
(click)=“functionName ()”

Use the bellow code for button:

<button
kendoButton [primary]=“true” (click)=“testClick()”
>Click Me</button>

“testClick” its function Name replace this with your function, need to be call. Now create a function in “aap.component.ts”, like:

public testClick(): void {

alert(“Kendo Button Click Event is Working !!”);

}

Now run your app in browser, check the page:

Now click to test your click event.

Now you can use any Events Click, focus or more.

Are you an Angular Developer? If yes so which CSS or SCSS you are using for making your application better in User Experience?

In this post, I’ll tell you how you can use Kendo UI by Telerik to make applications that pop out to users. We will use the minimalist approach in this article by simply “enhancing” a button on the webpage.

I’ve divided this article into three steps:

1. Download Kendo UI for React, Angular, jQuery.
2. Create an Angular Application by Angular CLI
3. Include Kendo UI to showcase the improved User Experience

So, let’s start and see what is Kendo UI and how to get it?

What is Kendo UI?

Kendo UI is an easy to use HTML 5 JavaScript framework by Telerik for building interactive and high-performance modern web applications and websites. Kendo UI comes with JavaScript files, images and style sheets and offers a library of 70+ UI widgets and features. The best part is that Kendo UI provides AngularJS and Bootstrap integration.

To get Kendo UI, browse to:  https://www.telerik.com/kendo-ui and login if you have a Telerik account already or click to ‘Get a Free Trial’.

Now you need to select an option to indicate in which Application you want to use Kendo UI. I selected Angular because I’ll be creating an Angular 5 application.

Next you will need to create a telerik.com account. After the account is created, you will be shown a Getting Started document by Telerik Developers. This is a quick start guide that you can refer.

As the next step, we will create a vanilla Angular app in which we will install Kendo UI.

For Angular development, we need to have Angular CLI installed on our computer. We can check the same as follows:

1. Open Command Prompt and type "ng -v" use to check angular version.

If we do not have angular installed, the command prompt will give an error. In this case,  please install Angular CLI, from the following URL: https://cli.angular.io/

Type the following command at Node command prompt or Command Prompt of windows: "npm install -g @angular/cli"

After successful installation of Angular CLI try again the last Command to check Angular Version "ng -v". I hope now you’ll get version info on command prompt.

Let’s create our first Angular App using CLI  by using the following command:
"ng new my-first-project –style=scss"

Now your Angular application is successfully created. But still we don’t have Kendo UI in our app.

To add Kendo UI in the Angular app, use the following command:

"npm install --save @progress/kendo-angular-buttons @progress/kendo-angular-l10n @angular/animations"

Note: The Kendo UI components use Angular animations. As of the Angular 4/5 release, you have to install the @angular/animations package separately.

Now you have Kendo buttons available in your Angular application.

We need to edit our project and I’ll be using Visual Studio Code by Microsoft for the same.

Open that folder where created your Angular application “my-first-project”.

Now you can see all files and folders of your project in your Visual studio Explorer. src is that folder where your application is existing.

As we know in Angular application we have a module file “src/app/app.module.ts” so update that file with following code:

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 Animations module

import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;

// Import the ButtonsModule

import { ButtonsModule } from ‘@progress/kendo-angular-buttons’;

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

FormsModule,

HttpModule,
// Register the modules

BrowserAnimationsModule,

ButtonsModule

],

providers: [],

bootstrap: [AppComponent]

})

export
class AppModule { }

Your code should look like the below:

Now we will add an input button from Kendo UI. Update your view file from path ‘src/app/app.component.html’ with the following code:

{{title}}

kendoButton (click)=“onButtonClick()”

[primary]=“true”>My Kendo UI Button

The code should look like the following:

We are almost done. The last change is to include a function in your default component that can be called on button click which updates the model value.

Update your app component ‘src/app/app.component.ts ‘ as follows:

import { Component } from ‘@angular/core’;

@Component({

selector: ‘app-root’,

templateUrl: ‘./app.component.html’,

styleUrls: [‘./app.component.scss’]

})

export class AppComponent {

title = ‘Hello World!’;

onButtonClick() {
this.title = ‘Hello from Kendo UI!’;

}

}

It is time to run the application. Now open terminal or Command prompt to start your application.

For built-in terminal in Visual Studio code press (ctrl + `) and run command:

'ng serve' to start web pack for angular application.

Note: The Kendo UI components use @angular-devkit/core from node modules. If you get the error as shown:

Then you have to install the @angular-devkit/core package separately by using command:

'npm I @angular-devkit/core'

After this again run 'ng serve' or 'ng serve –open' it’ll start listening our request on a default port 4200 in windows. We can change it if this port is busy by using command: 'ng serve –port <1234>' 1234 is any free port.

So, here is your first look of your application with a simple and plain button.

Now install Kendo Default Theme for you scss in application with command:

'npm install --save @progress/kendo-theme-default'

It will update your packages in application.

Now just update last file of this project ‘src/styles.scss’ to import the Kendo Theme:

@import “~@progress/kendo-theme-default/scss/all”;

This is how easy it is to get Kendo UI in your Angular v5 app.

Just run your application again with same command: 'ng serve –open'

With the stylesheet in place, you should see something like this in the browser:

Hope you have enjoyed this simple tutorial on Getting Started with Angular with Kendo UI. The source code for this simple application will be available shortly.

To explore the other features of Kendo UI button, please visit: https://www.telerik.com/kendo-angular-ui/components/buttons/button/

We will be publishing more such guides. Come back for more!