# Angular
> Create an ASP.NET Core backend and an Angular app that displays documents with the Document Viewer component from the tx-ng-document-viewer npm package.
- **Product:** TX Text Control .NET Server
- **Section:** Documentation
- **Kind:** Topic
- **Path:** TX Text Control .NET Server > Getting Started > Document Viewer > Angular
- **3173 words**
- **Web URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/angular/
- **LLMs URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/angular/llms.txt
- **LLMs-Full URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/angular/llms-full.txt
---
Two applications work together for the Angular Document Viewer: an ASP.NET Core backend that renders documents with TX Text Control .NET Server and an Angular application that displays them with the Document Viewer component. You install the npm package, add the `tx-document-viewer` component to a template, connect it to your backend and load a document from TypeScript.
### Prerequisites
- Visual Studio 2026 with the .NET 10 SDK for the backend. The engine package requires .NET 8 or higher.
- A TX Text Control .NET Server license and access to the [Text Control private NuGet feed](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/nuget/private-feed/llms-full.txt).
- [Node.js](https://nodejs.org/en/download/) and npm.
- The Angular CLI 19. To install it globally, open a command prompt and run:
```bash
npm install -g @angular/cli@19
```
The Angular steps were written with Angular CLI 19 and Visual Studio Code. The package supports Angular versions up to 21. The latest Angular CLI creates applications with a newer Angular version and different file names, so install version 19 to follow the steps.
### How the Applications Work Together
The Angular component only contains the viewer's user interface. The documents are loaded and rendered by an ASP.NET Core backend that references the `TXTextControl.Web.DocumentViewer` package. The component's `basePath` property contains the URL of this backend. Because the Angular development server and the backend run on different origins, the backend must allow cross-origin requests (CORS).
### Evaluate Without a Backend of Your Own
Text Control hosts a trial backend at `backend.textcontrol.com` for evaluating the Angular components. It needs a personal trial access token, which you create on the [trial access token page](https://www.textcontrol.com/products/javascript/angular/access-token/) after signing in with a Text Control account. The token is valid for 30 days.
To use it, skip the backend steps below and set `basePath` to `https://backend.textcontrol.com?access-token=yourtoken`, with your token in place of `yourtoken`. For development and deployment, you host your own backend as described next.
### Create the Backend
#### Create the Project
1. In Visual Studio 2026, choose *Create a new project*.
2. Select *ASP.NET Core Web API* as the project template and confirm with *Next*.
3. Enter a project name, choose a location and confirm with *Next*.
4. Choose *.NET 10.0 (Long Term Support)* as the *Framework*, check *Use controllers* and confirm with *Create*.
#### Install the NuGet Packages
1. In *Solution Explorer*, select your project and choose *Manage NuGet Packages...* from the *Project* menu.
2. Select the Text Control private NuGet feed as the *Package source*.
3. Install `TXTextControl.Web.DocumentViewer` and `TXTextControl.TextControl.Core.SDK`.
Alternatively, run the following commands in the project folder:
```bash
dotnet add package TXTextControl.Web.DocumentViewer
dotnet add package TXTextControl.TextControl.Core.SDK
```
For the Windows-only Classic engine, install `TXTextControl.Web.DocumentViewer.Classic` and `TXTextControl.TextControl.ASP.SDK` instead.
#### Configure Program.cs
Open *Program.cs* and replace its content with the following code:
```csharp
using TXTextControl.Web.MVC.DocumentViewer;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllers();
// *** Required for Document Viewer ***
builder.Services.AddCors(p => p.AddPolicy("corsapp", builder =>
{
builder.WithOrigins("*").AllowAnyMethod().AllowAnyHeader();
}));
var app = builder.Build();
// Configure the HTTP request pipeline.
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
// *** Required for Document Viewer ***
// add the DocumentViewer middleware
app.UseCors("corsapp");
app.UseRouting();
app.UseTXDocumentViewer();
app.Run();
```
The code does the following:
- `AddControllers` registers the controllers, including the controller that the viewer package provides for the viewer's HTTP requests.
- `AddCors` and `UseCors` define and apply a CORS policy. It allows requests from all origins, so the Angular application can call the backend. In production, you can restrict the policy to the origins of your frontend.
- `UseTXDocumentViewer` adds the Document Viewer to the request pipeline.
The project template contains a sample controller that returns weather forecasts. You can remove it.
To protect the viewer endpoints with an access token, see the blog article [Adding a Security Middleware to ASP.NET Core Web Applications to Protect TX Text Control Document Editor and Document Viewer Endpoints](https://www.textcontrol.com/blog/2024/03/18/adding-a-security-middleware-to-asp-net-core-web-applications-to-protect-tx-text-control-document-editor-and-document-viewer-endpoints/).
#### Start the Backend
1. Press *F5* to start the backend.
2. Note the HTTPS URL of the backend, for example `https://localhost:7275`. You find it in *Properties/launchSettings.json*. You need this URL for the `basePath` property of the component.
Leave the backend running while you work on the Angular application.
### Create the Angular Application
Open a command prompt and create a new project:
```bash
ng new my-viewer-app --no-standalone
```
Confirm *CSS* as the stylesheet format and answer *N* to disable server-side rendering and static site generation. The `--no-standalone` option creates an application with an `NgModule`, to which you add the viewer module.
Change to the project folder, install the Angular CDK and the Document Viewer package, and open the folder in Visual Studio Code:
```bash
cd my-viewer-app
npm i @angular/cdk@19
npm i @txtextcontrol/tx-ng-document-viewer
code .
```
The Document Viewer package needs `@angular/cdk`. Install it with the major version of your Angular version first. Otherwise npm tries to add `@angular/cdk` 21, which requires Angular 21, and the installation fails with an `ERESOLVE` error. [Angular npm Packages](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/angular/llms-full.txt) explains the supported Angular versions and how to handle peer dependency conflicts.
### Import the Document Viewer Module
Open *src/app/app.module.ts*, import `DocumentViewerModule` from `@txtextcontrol/tx-ng-document-viewer` and add it to the `imports` array. The complete file looks like this:
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DocumentViewerModule } from '@txtextcontrol/tx-ng-document-viewer';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
DocumentViewerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
If your Angular CLI version generates different file names, add `DocumentViewerModule` to the `imports` of the module that bootstraps your root component.
### Add the Component to the Template
Open *src/app/app.component.html* and replace its complete content with the following code. Replace `https://localhost:7275` with the URL of your backend.
```html
```
`documentData` contains the text "Hello there" as a Base64-encoded string. `documentPath` only sets the document name that the viewer displays.
### Component Properties
The properties `width`, `height` and `basePath` are required. Others set the document, the docking, the toolbar, text selection, the thumbnail pane, the signature settings and the displayed strings. Bind boolean and object values with square brackets, for example `[toolbarDocked]="true"`. [tx-document-viewer](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/angular-api/#tx-document-viewer) in the Angular API reference lists all properties with their types and defaults.
### Run the Applications
1. Make sure that the backend is running in Visual Studio.
2. In the command prompt, start the Angular application from the *my-viewer-app* folder:
```bash
ng serve --open
```
Your default browser opens the Angular application, and the Document Viewer shows the text "Hello there". If the viewer doesn't load, check that the backend is running and that `basePath` matches its URL.
Because `dock` is `Window`, the viewer fills the browser window, and the status bar shows the name from `documentPath`:
The small gray line above the text is the trial text of the trial packages the screenshot was taken with; see [Trial and Licensed Packages](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/licensing/development/#trial-and-licensed-packages).
### Load a Document With TypeScript
In most Angular applications, the document is loaded at run time, not through the `documentData` property. The Angular component supports the same JavaScript API as all other Document Viewer frontends: the [TXDocumentViewer](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/txdocumentviewer/llms-full.txt) object. This object exists only after the viewer has been initialized, which the viewer signals with the `documentViewerLoaded` event on the `window` object.
Open *src/app/app.component.ts*. Add `HostListener` to the import from `@angular/core`, and declare the global `TXDocumentViewer` object below the imports so that TypeScript accepts it:
```typescript
import { Component, HostListener } from '@angular/core';
declare const TXDocumentViewer: any;
```
Then add the following method to the `AppComponent` class. `HostListener` calls it when the `documentViewerLoaded` event occurs:
```typescript
@HostListener('window:documentViewerLoaded', ['$event'])
onDocumentViewerLoaded() {
TXDocumentViewer.loadDocument(btoa('Loaded with TypeScript'), 'loaded.html');
}
```
Remove the `documentData` attribute from *app.component.html* and save both files. When the application reloads, the viewer shows the document that the method loads.
[loadDocument](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/documentviewercontroller/loaddocument-method/llms-full.txt) expects the document as a Base64-encoded string and the document name to display. In a real application, you typically request the document from your backend with the Angular `HttpClient` and pass the returned Base64 string to `loadDocument`. To collect signatures, pass a [SignatureSettings](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/signaturesettings/llms-full.txt) object as the third parameter.
### Next Steps
- [JavaScript](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/javascript/llms-full.txt): more about the JavaScript API, including annotations and signatures.
- [Angular npm Packages](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/angular/llms-full.txt): the supported Angular versions and peer dependency conflicts.
- [Loading Documents](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/loading/llms-full.txt): pass documents from a controller, load them at run time and show PDF files with PDF.js.
- [Digital Signatures](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/digital-signatures/llms-full.txt): collect signatures and sign documents on the server.
---
## Nearby
- **Previous:** [ASP.NET Core](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/aspnet-core/llms-full.txt)
- **Next:** [React](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/react/llms-full.txt)