# Getting Started with Kendo UI for Angular in an ASP.NET Core Application

This article provides a step-by-step guide that uses the [Microsoft Angular Project Template](https://docs.microsoft.com/en-us/aspnet/core/spa/angular?tabs=netcore-cli) to create a new Angular application with ASP.NET Core 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 ASP.NET Core](https://github.com/telerik/kendo-angular/tree/master/examples-standalone/kendoangular-aspnetcore-integration) 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](https://www.telerik.com/kendo-angular-ui-develop/components/installation/requirements)
* [Node.js 20](https://nodejs.org/en/download/)
* [Angular 18 CLI](https://angular.dev/installation#install-angular-cli)
* [.NET Core 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0)
* [Visual Studio Code](https://code.visualstudio.com/download) or another code editor. Feel free to also check the [Using .NET in Visual Studio Code](https://code.visualstudio.com/docs/languages/dotnet) guide for useful tips.
* (Optional) A valid license for [Telerik UI for ASP.NET MVC](https://www.telerik.com/aspnet-mvc) or [DevCraft](https://www.telerik.com/devcraft). You need this license to use the [`ToDataSourceResult`](https://docs.telerik.com/aspnet-mvc/api/kendo.mvc.extensions/queryableextensions#todatasourceresultsystemdatadatatablekendomvcuidatasourcerequest) helper method for server-side Grid data operations. The helper requires access to the [Telerik Private NuGet Source](https://docs.telerik.com/blazor-ui/installation/nuget#telerik-private-nuget-source). You can skip this requirement by implementing your own server-side data processing logic.

The mentioned versions are the latest as of July 31, 2024, at the time of writing this article.

## Create a New Angular Application with ASP.NET Core

To create a new Angular application with ASP.NET Core:

1. Open a terminal or command prompt and run the following command to create a new Angular application with ASP.NET Core:

   ```bash
   dotnet new angular -o KendoAngular-ASPNETCore-App
   ```

   This command creates a new Angular application with ASP.NET Core in a folder named `KendoAngular-ASPNETCore-App`. The `new angular` command is part of the [Microsoft Template Arguments](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new#arguments).

2. Navigate to the newly created project folder:

   ```bash
   cd KendoAngular-ASPNETCore-App
   ```

3. Build the application to ensure that everything is working correctly:

   ```bash
   dotnet build
   ```

4. Run the application:

   ```bash
   dotnet run
   ```

   In the terminal, you will see a message similar to the following:

   ```bash
   Now listening on: https://localhost:5001
   Now listening on: http://localhost:5000
   ```

   The port number will be different on different machines.

   Open a browser and navigate to the displayed URL to see the application running. The Angular application will need some time to build and load the first time you run it.

## Update ASP.NET Core and Angular Versions

The default Angular and ASP.NET Core versions in the Microsoft Angular Project Template might not be the latest. To update the Angular version, follow these steps:

1. Navigate to the `ClientApp` folder in the project.

```bash
  cd ClientApp
```

2. Update the Angular CLI by following Angular's [update guide](https://angular.dev/update-guide).

3. To update the ASP.NET Core versions, make sure that you have the .NET Core 8 SDK installed and follow the official [ASP.NET Core migration guide](https://learn.microsoft.com/en-us/aspnet/core/migration/70-80?view=aspnetcore-8.0\&tabs=visual-studio).

Now that you have updated the Angular and ASP.NET Core versions, you can proceed with integrating Kendo UI for Angular.

## Integrate Kendo UI for Angular

To demonstrate how to integrate Kendo UI for Angular with the ASP.NET Core application, this guide will show you how to add a Grid component:

1. Navigate to the `ClientApp` folder in the project.

   ```bash
   cd ClientApp
   ```

2. Install the Kendo UI for Angular Data Grid by running the following command:

   ```bash
   ng add @progress/kendo-angular-grid
   ```

3. Add the Kendo UI for Angular Data Grid module to the `app.module.ts` file:

   ```ts
   import { GridModule } from '@progress/kendo-angular-grid';

   @NgModule({
       imports: [
           GridModule
       ]
   })
   ```

4. 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>
   ```

5. Create a `Product` class in the `Models` folder:

   ```cs
   namespace Kendo_ASP.NET_Core_Angular.Models
   {
       public class Product
       {
           public int ProductID { get; set; }
           public string ProductName { get; set; }
           public decimal UnitPrice { get; set; }
       }
   }
   ```

   If the `Models` folder does not exist, create it in the root of the project.

6. Create an ASP.NET Core controller that retrieves the data from a database. For simplicity, this example uses static data in the backend.

   ```cs
   using Microsoft.AspNetCore.Mvc;
   using Kendo_ASP.NET_Core_Angular.Models;

   namespace Kendo_ASP.NET_Core_Angular.Controllers
   {
       [ApiController]
       [Route("products")]
       public class ProductController : ControllerBase
       {
           private static List<Product> Products = new List<Product>
           {
               new Product
               {
                   ProductID = 1,
                   ProductName = "Chai",
                   UnitPrice = 18,
               },
               new Product
               {
                   ProductID = 2,
                   ProductName = "Chang",
                   UnitPrice = 19,
               },
               new Product
               {
                   ProductID = 3,
                   ProductName = "Aniseed Syrup",
                   UnitPrice = 10,
               }
           };

           [HttpGet]
           public IEnumerable<Product> Get()
           {
           return Products;
           }
       }
   }
   ```

7. Update your `proxy.conf.js` in the `ClientApp` folder to include the new route:

   ```ts
   const PROXY_CONFIG = [
       {
           context: [
               "/weatherforecast", // Added by default
               "/products" // Your newly created API route
           ],
       }
   ];

   module.exports = PROXY_CONFIG;
   ```

8. Create an Angular service to fetch the data from the ASP.NET Core controller, and then update the product.service.ts file:

   ```bash
   ng generate service services/product
   ```

   ```ts
   import { Inject, Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';


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

       constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
           this.baseUrl = baseUrl; // Retrieve the API URL from the app module.
       }

      public getProducts(): Observable<any[]> {
           return this.http.get<any[]>(this.baseUrl + 'products');
       }
   }
   ```

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

   ```ts
   import { Component } from '@angular/core';
   import { ProductService } from '../services/product.service';

   @Component({
       selector: 'app-home',
       templateUrl: './home.component.html',
   })
   export class HomeComponent {

   public gridData: unknown[] = [];

   constructor(private productService: ProductService) { // Inject the service.
       this.productService.getProducts().subscribe({
           next: (result) => {
           this.gridData = result;
           },
           error: (error) => {
           console.error(error);
           }
         });
       }
     }
   ```

10. Run the application:

    ```bash
    dotnet run
    ```

The application will now display the Kendo UI for Angular Data Grid with the data fetched from the ASP.NET Core controller.

## Perform Data Operations and Handle File Uploads

The next task is to manage the data state and perform CRUD operations using the Kendo UI for Angular Grid. Additionally, you will explore how to handle file uploads with the Kendo UI for Angular Upload component in conjunction with ASP.NET Core.

### Handling Grid Data Operations

There are few ways to handle data operations with the Kendo UI for Angular Grid. This article explores the two most common of them:

1. Client-side Operations: You can use the [`process`](https://www.telerik.com/kendo-angular-ui-develop/components/data-query/api/process) method to handle data operations like sorting, filtering, and paging on the client. For more information, refer to the [Data Operations](https://www.telerik.com/kendo-angular-ui-develop/components/grid/data-operations) article.

2. Server-side Operations: The server-side operations can be handled by using the [`ToDataSourceResult`](https://www.telerik.com/aspnet-mvc/documentation/api/kendo.mvc.extensions/queryableextensions#todatasourceresultsystemdatadatatablekendomvcuidatasourcerequest) helper method from the [Telerik ASP.NET MVC UI](https://www.telerik.com/aspnet-mvc) library. This is an optional helper that requires a valid license for [Telerik UI for ASP.NET MVC](https://www.telerik.com/aspnet-mvc) or [DevCraft](https://www.telerik.com/devcraft). If you prefer, you can implement your own server-side data processing logic instead.

   > To use the `ToDataSourceResult` method, you need to install the Telerik ASP.NET MVC UI NuGet package source by following the [Installing Telerik UI for ASP.NET MVC Using NuGet Packages](https://www.telerik.com/aspnet-mvc/documentation/installation/installation-options/nuget-install) or use the [.NET CLI installation guide](https://www.telerik.com/blazor-ui/documentation/installation/nuget#use-the-net-cli), which this article follows.

   Run the following command to install the necessary packages in the ASP.NET Core project:

   ```bash
   dotnet add package Kendo.Mvc
   dotnet add package Kendo.Mvc.Extensions
   ```

This method will require you to convert the Grid [`State`](https://www.telerik.com/kendo-angular-ui-develop/components/data-query/api/state) to [`toDataSourceRequestString`](https://www.telerik.com/kendo-angular-ui-develop/components/data-query/api/todatasourcerequeststring) or [`translateDataSourceResultGroups`](https://www.telerik.com/kendo-angular-ui-develop/components/data-query/api/translatedatasourceresultgroups) (if the data is being grouped) and send it to the server where the `ToDataSourceResult` method will handle it for you. For more details how to use the method refer to [Sample Integration](https://www.telerik.com/kendo-angular-ui-develop/components/data-query/mvc-integration) article.

### Handling Data Grid CRUD Operations

[CRUD](https://learn.microsoft.com/en-us/aspnet/core/data/ef-mvc/crud?view=aspnetcore-8.0) operations can be handled by using the [`add`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridcomponent#add), [`edit`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridcomponent#edit), [`save`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridcomponent#save) ,[`cancel`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridcomponent#cancel) and [`remove`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridcomponent#remove) events. For more information, refer to the [Editing Basics](https://www.telerik.com/kendo-angular-ui-develop/components/grid/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 ASP.NET Core:

[Kendo UI for Angular Data Grid and Upload Integration with ASP.NET Core](https://github.com/telerik/kendo-angular/tree/master/examples-standalone/kendoangular-aspnetcore-integration)

The application uses static data, but in a real-world scenario, you need to replace the static data with data from a database. Entity Framework Core can be used to handle the database operations. For more information, refer to the [Entity Framework Core](https://learn.microsoft.com/en-us/ef/core/) article.

### Handling Files Using Upload Component

On the client side, add the [`saveUrl`](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/uploadcomponent#saveurl) and [`removeUrl`](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/uploadcomponent#removeurl) properties to the Upload component to handle the file upload and remove operations. The `saveUrl` and `removeUrl` properties should 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 [`IFormFile`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.http.iformfile?view=aspnetcore-8.0) interface. For more information, refer to the [Upload files in ASP.NET Core](https://learn.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-8.0) article.

The [Kendo UI for Angular Grid and Upload Integration with ASP.NET Core](https://github.com/telerik/kendo-angular/tree/master/examples-standalone/kendoangular-aspnetcore-integration) application demonstrates how to handle file and chunk uploads with the Kendo UI for Angular Upload component and ASP.NET Core.

## Suggested Links

* [Kendo UI for Angular Java Spring Boot Integration](https://www.telerik.com/kendo-angular-ui-develop/components/installation/java-spring-kendo-angular-integration)
* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started)
* [Kendo UI for Angular Components](https://www.telerik.com/kendo-angular-ui)
* [Kendo UI for Angular Documentation](https://www.telerik.com/kendo-angular-ui/components/)
* [Kendo UI for Angular Data Grid Component](https://www.telerik.com/kendo-angular-ui-develop/components/grid)
* [Kendo UI for Angular Upload Component](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/upload)
* [Microsoft Angular Project Template](https://docs.microsoft.com/en-us/aspnet/core/spa/angular?tabs=netcore-cli)
* [ASP.NET Core Documentation](https://learn.microsoft.com/en-us/aspnet/core/?view=aspnetcore-8.0)
* [All Things Angular Telerik Blog Page](https://www.telerik.com/blogs/all-things-angular)