# WebDesigner Angular Core

Explore the integration of ActiveReports WebDesigner with Angular 8 and ASP.NET Core, enabling efficient report generation for modern web applications.

## Content

The WebDesigner\_Angular\_Core sample demonstrates the use of ActiveReports WebDesigner with an Angular 8 app and ASP.NET Core back end.
![Web Designer](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/sample_webdesigner.png)

>type=note
> **Note**: To run this sample, you must have
>
> * [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) (version 17.0 or later)
> * [.NET 6.0 SDK](https://dotnet.microsoft.com/en-us/download)
> * [.NET Core Hosting Bundle](https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/runtime-aspnetcore-6.0.0-windows-hosting-bundle-installer) (for deployment to IIS)
> * Angular 14 requires [Node.js](https://nodejs.org/en) 14 or later

### Sample Location

[https://github.com/activereports/WebSamples19/tree/main/WebDesigner_Angular_Core](https://github.com/activereports/WebSamples19/tree/main/WebDesigner_Angular_Core)

### Details

The WebDesigner\_Angular\_Core sample consists of two sample projects - WebDesigner\_Angular\_Core.Client and WebDesigner\_Angular\_Core.Server.

>type=note
> To debug the sample and then run it, right-click the **WebDesigner\_Angular\_Core.Server** project in the Solution Explorer and select **Set as Startup Project**.

When you run the sample, the WebDesigner opens in your browser wherein you can create, edit, or modify your reports. Following are the main menu options:

* **File**: Contains options to create, open, or save reports. It also contains the version information in About option.
* **Home**: Consists of report editing options such as cut, copy, paste, and delete. It also provides shortcuts for text formatting such as font, font size, font color, and horizontal and vertical text alignments.
* **Report**: Contains options to add, delete, or move pages (in Page Report) and add or remove header and footer (RDLX report), and change report themes.
* **Parameters**: Contains designer for designing the custom parameter panel.
* **Preview**: Click Preview to preview reports.
* **Properties**: Displays the properties of the selected report element. If more than one element is selected, only their common properties are shown.
* **Data**: Contains options to manage data sources, data sets, and parameters. It also displays common values such as current date and time, page number, total pages, and more.

>type=note
> **Note**: The timeout error sometimes appears on running the WebDesigner\_Angular(Core) sample with default settings. In this case, you should increase the connection timeout period. See [Troubleshooting](/activereportsnet/docs/v19.2/ar-troubleshooting) for details on how to resolve this issue.

The project consists of the following elements.

* ClientApp folder: This folder contains a standard Angular CLI app that is used for all UI concerns.
* Controllers folder: Contains DataSets and Templates controllers.
* Datasets: Contains JSON datasets - Categories, Employees, Products, and DataSet with Parameters.
* Resources: Contains reports, themes, images, etc that are used by the project to illustrate WebDesigner.
* appsettings.json: The json configuration file.
* readme: This file contains the instructions on how to run the sample project.
* Startup.cs: This is the default startup file.
* Web.config: This configuration file contains the httpHandlers that allow ActiveReports to process reports on the Web. Note that you need to manually update version information here when you update your version of ActiveReports.
* Services: Consists of classes that get datasets and templates information.
* wwwroot: Contains designer CSS and JavaScript files.