Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
# Angular Syncfusion Grid Client with Web API Adaptor

An Angular client application built to interact with backend Web APIs.

## Repository Description

An Angular-based frontend application that acts as a client-side adaptor for consuming, managing, and visualizing data from RESTful Web APIs. The project is structured to demonstrate clean API integration patterns, modular Angular architecture, and scalable frontend development practices.

## Overview

**WebapiadaptorClient** is a frontend Angular application designed to consume and display data from RESTful Web APIs. The application is structured for scalability, maintainability, and ease of development, making it suitable for enterprise and integration-focused use cases.

## Prerequisites

- **Angular** 17.2.3
- **TypeScript**
- **HTML / SCSS**
- **Node.js**
- **Angular CLI**

## Key Features

- Data binding using Syncfusion EJ2 Angular Grid
- Server-driven data consumption via RESTful Web APIs
- Paging, sorting, and filtering capabilities
- Inline editing with primary key support
- Toolbar actions for common grid operations
- Configurable and extensible column defi


## Running the Application

1. Clone the project repository
```
git clone <repo_link>
```
2. Navigate to the client application and install dependencies
```
cd WebApiAdaptor.Client
npm i
```
3. Navigate to the server project and build the application
```
cd ../WebApiAdaptor.Server
dotnet build
```
4. Run the server
```
dotnet run
```

## Reference Documentation

- [Getting started with EJ2 Angular](https://ej2.syncfusion.com/angular/documentation/grid/getting-started)
- [Editing](https://ej2.syncfusion.com/angular/documentation/grid/editing/edit)
- [Angular Grid API](https://ej2.syncfusion.com/angular/documentation/api/grid/index-default)
3 changes: 2 additions & 1 deletion WebApiAdaptor.Client/src/app/app.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ export class AppComponent {
ngOnInit(): void {
this.data = new DataManager({
url: 'https://localhost:7041/api/Orders',
adaptor: new WebApiAdaptor()
adaptor: new WebApiAdaptor(),
crossDomain:true
});

this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' };
Expand Down
Loading