Skip to main content
BuyLog In
.NET Reporting Tools
Search in…
Docs > Web Reporting > JavaScript Reporting > Reporting for Angular > Document Viewer > Quick Start > Use Visual Studio Templates
A newer version of this page is available. .
All docs
V23.1
Reporting
Product Information
Changes and Backward Compatibility
.NET / .NET Core Support
Get Started with DevExpress Reporting
Create Reports
Detailed Guide to DevExpress Reporting
Visual Studio Report Designer
WinForms Reporting
WPF Reporting
Web Reporting
General Information
Document Viewer
Mobile Viewer UI
Report Designer
ASP.NET Web Forms Reporting
ASP.NET MVC Reporting
ASP.NET Core Reporting
JavaScript Reporting
Server-Side Configuration
Reporting for Knockout-based Applications
Reporting for Angular
Print and Export
Print and Export without a Preview
Themes and Styles
Localization
Document Viewer
Quick Start
Use Visual Studio Templates
Use .NET CLI Templates
Create an Angular Front-End Application with a Document Viewer
Specify Parameter Values
Document Viewer Client-Side Configuration
Customization
Mobile Mode
Report Designer
Reporting for React
Reporting for Vue
Web UI Development Bundles that Include Reports
Localization
Blazor Reporting
Client-Side API
Application Security
Accessibility
.NET MAUI Reporting
WinUI Reporting
Cross-Platform .NET App UI
Backend Web API Service / REST API for Reporting
WCF Report Service
Discontinued Platforms
Security Considerations
Localize Reporting Applications
End-User Documentation
Redistribution and Deployment
API Reference
ASP.NET Core API Reference
Blazor API Reference
Client API Reference
Client API Reference (Web Forms & MVC)
Download CHM

Use Visual Studio Templates to Create an Angular Application with a Document Viewer

  • 2 minutes to read

This document describes how to use the DevExpress Template Gallery to generate a Single-Page Application (SPA) with the following projects:

  • An ASP.NET Core project that works as an API backend
  • An Angular project that works as a UI and contains the Document Viewer control.

The DevExpress Template Gallery implements a step-by-step process that allows you to create an ASP.NET Core application with a Document Viewer.

The created application includes a sample report storage that allows users to open report layout files (REPX) from the Reports folder and instances of report types predefined in the assembly.

Follow the steps below to create an ASP.NET Core application in Visual Studio:

  1. Select FILE | New | Project in the main menu or press CTRL+SHIFT+N to create a new project.

    Create New Web Application

  2. Select the DevExpress v23.1 Web App Template Gallery, and click Next:

    Select Web App Template Gallery

  3. Specify a project name and location, and click Create:

    Web App Template Gallery Configure Project

  4. Select Reporting Angular Application from the .NET 6 category in the invoked DevExpress Template Gallery.

    create-new-aspnet-core-angular-reporting-application-template-gallery

    Select a framework version and click Create Project.

  5. Enable the Add Viewer Page checkbox in the invoked DevExpress ASP.NET MVC Project Wizard to add the Document Viewer to the web application (the report-viewer.html file). You can add a Web Document Viewer and a Report Designer to the application.

    web-reporting-project-wizard-select-viewer

    Use the following Document Viewer settings:

    • Report Storage Name - the server-side report storage‘s class name.
    • Data Binding Mode - switches between the Expressions and Expressions (Advanced) modes that specify how data is fetched to reports and controls. See Data Binding Modes for more information.

    Click Create Project to apply these settings to the project.

  6. Optional. You can configure the Document Viewer to load a report when the application starts. Navigate to the ClientApp | src | app | report-viewer | report-viewer.ts file and replace the built-in report name with the name of your report:

    reportUrl: string = "TestReport";

  7. Run the project to see the result:

    angular-viewer-result