New to Kendo UI for Angular? Start a free 30-day trial

Getting Started with Kendo UI for Angular in a Java Spring Application

This Article provides a step-by-step guide that uses the Spring Initializr to create a new Java Spring Boot application and integrate the Kendo UI for Angular component library.

Want to jump straight to the runnable application? Check out the Kendo UI for Angular Data Grid and Upload Integration with Java Spring Boot application and follow the steps in the README.

Prerequisites

Before proceeding, ensure that you have the following installed:

System Requirements For Kendo UI for Angular
Node.js 20
Angular 18 CLI
Java 23
- Note: For macOS, ensure you download the correct installer for your architecture:
  - arm64: For Apple Silicon (M1, M2, etc.) Macs.
  - x64: For Intel-based Macs.
Apache Maven 3.9.9
- For Mac users, you can install Maven using Homebrew:
  bash
```
brew install maven@3.9.9
```
Visual Studio Code with Java extensions or another code editors like Eclipse and IntelliJ.

The versions listed above are current as of October 07, 2024.

Create a New Java Spring Boot Application

To create a new Java Spring Boot application:

Open the Spring Initializr in your browser.
Choose your settings and dependencies. For this guide, use the following settings:
- Project: Maven Project
- Language: Java
- Spring Boot: 3.3.4
- Project Metadata:
  - Group: com.example
  - Artifact: kendo-angular-java
  - Name: kendo-angular-java
  - Description: Kendo UI for Angular with Java Spring Boot Integration
  - Package Name: com.example.kendo-angular-java
  - Packaging: Jar
  - Java: 23
- Dependencies: Add the following dependencies:
  - Spring Web
  - Spring Boot DevTools
  - Spring Data JPA
  - H2 Database
Click the Generate button to download the project.
Create a new folder that will contain both the backend and frontend applications. For example, create a folder named kendo-angular-java.
Extract the downloaded project into the kendo-angular-java folder.
Run the application using the following command:
bash
```
mvn spring-boot:run
```
Open your browser and navigate to http://localhost:8080. You should see the default Spring Boot application page.

Integrate Kendo UI for Angular

In the main folder, create a new folder named ClientApp to store the Angular application.
- Your structure should look like this:
plaintext
```
kendo-angular-java (root)
├── backend (Spring Boot application)
├── ClientApp (Angular application)
```
Navigate to the ClientApp folder in the project.
bash
```
cd ClientApp
```
Install the Kendo UI for Angular Data Grid by running the following command:
bash
```
ng add @progress/kendo-angular-grid
```

Add the Kendo UI for Angular Data Grid standalone directive to your component:

import { KENDO_GRID } from '@progress/kendo-angular-grid';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [KENDO_GRID],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css',
})

Add a Kendo UI for Angular Grid component to the home.component.html file:

html

<kendo-grid [data]="gridData">
    <kendo-grid-column field="productID" title="Product ID">
    </kendo-grid-column>
    <kendo-grid-column field="productName" title="Product Name">
    </kendo-grid-column>
    <kendo-grid-column field="unitPrice" title="Unit Price">
    </kendo-grid-column>
</kendo-grid>

Create a Product class in the Models folder:

java

public class Product {
    private int productID;
    private String productName;
    private double unitPrice;

    public Product() {
    }

    public Product(int productID, String productName, double unitPrice) {
        this.productID = productID;
        this.productName = productName;
        this.unitPrice = unitPrice;
    }

    public int getProductID() {
        return productID;
    }

    public void setProductID(int productID) {
        this.productID = productID;
    }

    public String getProductName() {
        return productName;
    }

    public void setProductName(String productName) {
        this.productName = productName;
    }

    public double getUnitPrice() {
        return unitPrice;
    }

    public void setUnitPrice(double unitPrice) {
        this.unitPrice = unitPrice;
    }

    @Override
    public String toString() {
        return "Product{" +
                "productID=" + productID +
                ", productName='" + productName + '\'' +
                ", unitPrice=" + unitPrice +
                '}';
    }
}

If the Models folder does not exist, create it in the src/main/java/**group placeholder**/**artifact placeholder**/ folder.

Create a Java Spring Boot controller to fetch the data. For simplicity, in this guide, the data is hardcoded in the controller:

java

@RestController
@RequestMapping("/products")
public class ProductController {

    private static List<Product> products = new ArrayList<>();

    static {
        products.add(new Product(1, "Chai", 18));
        products.add(new Product(2, "Chang", 19));
        products.add(new Product(3, "Aniseed Syrup", 10));
        products.add(new Product(4, "Chef Anton's Cajun Seasoning", 22));
        products.add(new Product(5, "Chef Anton's Gumbo Mix", 21.35));
        products.add(new Product(6, "Grandma's Boysenberry Spread", 25));
        products.add(new Product(7, "Uncle Bob's Organic Dried Pears", 30));
        products.add(new Product(8, "Northwoods Cranberry Sauce", 40));
        products.add(new Product(9, "Mishi Kobe Niku", 97));
        products.add(new Product(10, "Ikura", 31));
        products.add(new Product(11, "Queso Cabrales", 21));
        products.add(new Product(12, "Queso Manchego La Pastora", 38));
    }

    @GetMapping("/get-products")
    public ProductDataResult getProducts() {
        return new ProductDataResult(products, products.size());
    }
}

Create an Angular service to fetch the data from the Java controller, and then update the product.service.ts file:

bash

ng generate service services/product

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, Observable } from 'rxjs';
import { State, toDataSourceRequestString } from '@progress/kendo-data-query';
import { GridDataResult } from '@progress/kendo-angular-grid';
import { tap } from 'rxjs/operators';
import { process } from '@progress/kendo-data-query';


@Injectable({
    providedIn: 'root'
})
export class ProductService {
    private baseUrl = 'http://localhost:8080/';

    constructor(private http: HttpClient) {}

    public getProducts(state: State): Observable<GridDataResult> {
        const url = `${
            this.baseUrl
        }products/get-products?${toDataSourceRequestString(state)}`;
    // The process function is used to manage the state of the Grid data.
    // You can manage the state of the data in the Java backend, but it will require filtering, sorting, paging, and grouping logic.
    return this.http.get<GridDataResult>(url).pipe(
        tap((response) => console.log('GET request response:', response)),
        map((response) => process(response.data, state))
    );
}
}

Update the home.component.ts file to fetch the data from the service:

import { Component } from '@angular/core';
import { ProductService } from './products.service';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
})
export class HomeComponent {
    public state: State = { skip: 0, take: 5, filter: { filters: [], logic: 'or' }, group: [], sort: [] };
    public gridData: unknown[] = [];
    public productService = inject(ProductService);

    ngOnInit(): void {
        this.getProducts(this.state);
    }

    private getProducts(state: State): void {
        this.productService.getProducts(state).subscribe({
            next: (result) => { this.gridData = result; },
            error: (error) => console.error(error),
        });
    }
}

Run both the Java Spring Boot application and the Angular application:
bash
```
mvn spring-boot:run
```
bash
```
ng serve
```
Open your browser and navigate to http://localhost:4200.

The application will now display the Kendo UI for Angular Data Grid with the data fetched from the Java Spring controller.

Perform Data Operations and Handle File Uploads

Most applications that use the Kendo UI for Angular Grid require you to manage the data state and perform CRUD operations. Handling file uploads is also a common requirement, where the Kendo UI for Angular Upload component in conjunction with Java Spring Boot comes in handy.

This part of the article guides you through the configuration of the data operations and the Upload component by providing references to the relevant resources, without covering every step of the process.

Handling Grid Data Operations

There are several ways to handle data operations with the Kendo UI for Angular Grid. The two most common are:

Client-side Operations: You can use the process method to handle data operations like sorting, filtering, and paging on the client. For more information, refer to the Data Operations article.
Server-side Operations: You need to handle the state of the Grid coming from the client on the server side. This logic depends on your data structure and the database you are using.

This article does not demonstrate server-side handling and focuses only on client-side operations. For server-side handling, you may need to refer to additional resources or documentation specific to your backend technology.

Handling Data Grid CRUD Operations

CRUD operations can be handled by using the add, edit, save ,cancel, and remove events. For more information, refer to the Editing Basics article. On the server side, you need to handle the Post, Put, Get, and Delete requests to handle the CRUD operations.

The following application demonstrates how to handle data and CRUD operations with the Kendo UI for Angular Data Grid and Java Spring Boot:

Kendo UI for Angular Data Grid and Upload Integration with Java Spring

The application uses static data, but in a real-world scenario, you need to replace the static data with data from a database. Spring Data JPA can be used to handle the database operations. For more information, refer to the Spring Data JPA documentation.

Handling Files Using Upload Component

On the client side, add the saveUrl and removeUrl properties to the Upload component to handle the file upload and remove operations. The saveUrl and removeUrl properties must point to the server-side methods that handle the file upload and remove operations.

On the server side, handle the uploaded files by using the MultipartFile interface. For more information, refer to the Upload files in Java Spring Boot article. Here is an example method to handle file uploads:

java

@PostMapping("/upload")
public ResponseEntity<String> onPostUpload(@RequestParam("files") List<MultipartFile> files) {
    // Handle the file upload.
    return "File uploaded successfully";
}

The Kendo UI for Angular Grid and Upload Integration with Java Spring application demonstrates how to handle file uploads with the Kendo UI for Angular Upload component and Java Spring Boot.