Kendo Angular button tutorial and example

Angular Kendo Button Example: In this example, How to integrate kendo buttons CSS framework in Angular application. It also includes how to use the tailwind CSS button in the component

Angular Kendo Button

Step 1 Create Angular Application
Step 2 Start Development Server
Step 3 Add Kendo angular buttons dependencies
Step 4 Add kendo theme and styles to Angular application
Step 5 Create a button component example
Step 4 Adding Icons to buttons.
Step 5 Button with disabled.
Step 6: Test Angular Application

Create an Angular application.

First, Let’s create an angular application using the Angular CLI command

A:\work>ng new angular-kendo
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss
CREATE angular-kendo/angular.json (3249 bytes)
CREATE angular-kendo/package.json (1077 bytes)
CREATE angular-kendo/README.md (1058 bytes)
CREATE angular-kendo/tsconfig.json (863 bytes)
CREATE angular-kendo/.editorconfig (274 bytes)
CREATE angular-kendo/.gitignore (620 bytes)
CREATE angular-kendo/.browserslistrc (600 bytes)
CREATE angular-kendo/karma.conf.js (1430 bytes)
CREATE angular-kendo/tsconfig.app.json (287 bytes)
CREATE angular-kendo/tsconfig.spec.json (333 bytes)
CREATE angular-kendo/src/favicon.ico (948 bytes)
CREATE angular-kendo/src/index.html (298 bytes)
CREATE angular-kendo/src/main.ts (372 bytes)
CREATE angular-kendo/src/polyfills.ts (2338 bytes)
CREATE angular-kendo/src/styles.scss (80 bytes)
CREATE angular-kendo/src/test.ts (745 bytes)
CREATE angular-kendo/src/assets/.gitkeep (0 bytes)
CREATE angular-kendo/src/environments/environment.prod.ts (51 bytes)
CREATE angular-kendo/src/environments/environment.ts (658 bytes)
CREATE angular-kendo/src/app/app-routing.module.ts (245 bytes)
CREATE angular-kendo/src/app/app.module.ts (393 bytes)
CREATE angular-kendo/src/app/app.component.html (23364 bytes)
CREATE angular-kendo/src/app/app.component.spec.ts (1094 bytes)
CREATE angular-kendo/src/app/app.component.ts (218 bytes)
CREATE angular-kendo/src/app/app.component.scss (0 bytes)
√ Packages installed successfully.

The file will have its original line endings in your working directory
    Successfully initialized git.

It creates an application with default settings and creates an application folder structure with required dependencies.

Once the application created, Please run the application

npm run start 
(or)
ng serve

It runs the angular application and acces at http://localhost:4200.

Add Kendo angular buttons dependencies

First, Install below npm dependencies.

@progress/kendo-theme-default: Default theme must install using npm command
@progress/kendo-theme-bootstrap: Bootstrap-related theme and install if you need bootstrap-related styles for theme and components.

Run the below commands to install in the application.

A:\work\angular-kendo>npm install -S @progress/kendo-theme-bootstrap

added 4 packages, removed 1 package, and audited 1056 packages in 11s

93 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

A:\work\angular-kendo>npm install -S @progress/kendo-theme-default

up to date, audited 1056 packages in 3s

93 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Next, Install @progress/kendo-angular-buttons as a dependency (-S) into the angular app Next, also install it

A:\work\angular-kendo>npm install -S @progress/kendo-angular-buttons

added 25 packages, and audited 1052 packages in 16s

91 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

All the above npm install commands updates to package.json and installs to node_module project.

package.json:

"dependencies": {

    "@progress/kendo-angular-buttons": "^6.4.1",
    "@progress/kendo-theme-bootstrap": "^4.43.0",
    "@progress/kendo-theme-default": "^4.43.0",
  },

Add kendo theme and styles to Angular application

Open styles.css file in the src folder of the angular application.

Update sass styles with importing kendo theme default sass styles styles.scss:

@import "@progress/kendo-theme-default/scss/all";

It imports all the themes and component styles.

It is an important step and if it does not update correctly, Kendo styles do not show for components and theme.

Import ButtonsModule in the application module

Kendo provides components and directions for buttons in ButtonsModule.

Let’s import ButtonsModule into the app.module or your child module So that It is ready to use all the components and directives in angular components.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonsModule } from '@progress/kendo-angular-buttons';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    ButtonsExampleComponent
  ],
  imports: [

    ButtonsModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Create a button component example

Let’s create a new component buttons-example using the ng g component command.

A:\work\angular-kendo>ng g component buttons-example
CREATE src/app/buttons-example/buttons-example.component.html (30 bytes)
CREATE src/app/buttons-example/buttons-example.component.spec.ts (683 bytes)
CREATE src/app/buttons-example/buttons-example.component.ts (311 bytes)
CREATE src/app/buttons-example/buttons-example.component.scss (0 bytes)
UPDATE src/app/app.module.ts (509 bytes)

Let’s see component Let’s create a button using plain HTML

kendoButton is an Angular directive that adds kendo button style.

Added click event binding using click event syntax.

<button kendoButton (click)="onClick()">Button</button>

IN the typescript component, added binding method.

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

@Component({
  selector: 'app-buttons-example',
  templateUrl: './buttons-example.component.html',
  styleUrls: ['./buttons-example.component.scss']
})
export class ButtonsExampleComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
  onClick() {
    alert("Kendo Button click example");
  }
}

Adding Icons to buttons.

Adding icons to the button is straightforward.

It provides two attributes to add icons.

icon attribute provides to make button with icon. iconClass: attribute provides to configure thrid part icon library

   <button kendoButton (click)="onClick()" [primary]="true" [icon]="'delete'">Delete</button>

Here delete is an inbuilt icon class from the kendo icon library.

You can also add font awesome and material icons using iconClass.

First, Import library css file in index.html

<link
rel=“stylesheet”
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/fontawesome.min.css">

For a button, use iconClass

<button kendoButton (click)="onClick()" [primary]="true" [iconClass]="'far fa-edit'">Edit</button>

Here is an example to change icon on button click.

This example defaults a button with the edit icon and text, On clicking it change button text and icon to delete.

<p>buttons  example works!</p>


<div>
    <h1> Icons button click event</h1>
    <button kendoButton (click)="onClick()" [primary]="true" [icon]="'delete'">Delete</button>


    <button kendoButton (click)="onClick()" [primary]="true" [iconClass]="'far fa-edit'">Edit</button>
    <button kendoButton (click)="onClick()" [primary]="true" [iconClass]="'fas fa-edit'">Two</button>
    <button kendoButton (click)="onClick()" [primary]="true" [icon]="isEdit?'delete': 'edit'">{{isEdit?"delete":
        'edit'}}</button>
</div>

And the component code

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

@Component({
  selector: 'app-buttons-example',
  templateUrl: './buttons-example.component.html',
  styleUrls: ['./buttons-example.component.scss']
})
export class ButtonsExampleComponent implements OnInit {
  public isEdit: boolean = false;

  constructor() { }

  ngOnInit(): void {
  }
  onClick() {
    this.isEdit = true;
  }
}

How to Disable kendo button in Angular

disabled attributes makes button to enable or disable in Angular.

    <button kendoButton (click)="onClick()" [disabled]="true">Disabled</button>

Test Angular Application

Here is an Angular kendo button complete example.

buttons-example.component.html

<h1>Kendo Angular Button examples</h1>

<div>
    <h4> Simple primary button click event</h4>
    <button kendoButton (click)="onClick()" [primary]="true">One</button>
    <button kendoButton (click)="onClick()" [primary]="false">Two</button>
</div>

<div>
    <h4> Icons button click event</h4>
    <button kendoButton (click)="onClick()" [primary]="true" [icon]="'delete'">Delete</button>

    <button kendoButton (click)="onClick()" [primary]="true" [iconClass]="'far fa-edit'">Edit</button>
    <button kendoButton (click)="onClick()" [primary]="true" [iconClass]="'fas fa-edit'">Two</button>
    <button kendoButton (click)="onClick()" [primary]="true" [icon]="isEdit?'delete': 'edit'">{{isEdit?"delete":
        'edit'}}</button>

</div>

<div>
    <h4> Simple primary button disabled </h4>
    <button kendoButton (click)="onClick()" [disabled]="isDisabled">Disabled</button>
    <button kendoButton (click)="onClick()" [primary]="true">Disable other button</button>
</div>

buttons-example.component.ts

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

@Component({
  selector: 'app-buttons-example',
  templateUrl: './buttons-example.component.html',
  styleUrls: ['./buttons-example.component.scss']
})
export class ButtonsExampleComponent implements OnInit {
  public isEdit: boolean = false;
  public isDisabled: boolean = false;

  constructor() { }

  ngOnInit(): void {
  }
  onClick() {
    this.isEdit = true;
    this.isDisabled = true;

  }
}

Output:

Conclusion

Step by step by tutorial how to add kendo buttons to Angular application with multiple examples on icon and icon class disabled

Kendo Angular button tutorial and example

Angular Kendo Button

Create an Angular application.

Add Kendo angular buttons dependencies

Add kendo theme and styles to Angular application

Import ButtonsModule in the application module

Create a button component example

Adding Icons to buttons.

How to Disable kendo button in Angular

Test Angular Application

Conclusion

Angular 12 Setup Mock API and consume and return data

Different ways to apply CSS styles to components in Angular application

Fix for Property has no initializer and is not assigned in the constructor

Fix The Angular Compiler requires TypeScript versions

How to compare dates in Angular | Momentjs example

How to convert json to/from object in angular|Typescript

How to convert numbers to words in Angular|Typescript example