Angular v18

The frequency of Angular releases is high compared to new major releases of .NET. Generally, a major release comes every 6 months and the average support window for major releases is 18 months. Thus, Angular version and application updates are a very typical task for Angular developers.

In order to be compatible with a wider range of releases, we have chosen not to build our packages directly against the latest release. Our components can be installed ignoring peer dependencies and are compatible with the latest version.

Prerequisites There are two ways to evaluate TX Text Control Document Viewer. Either host your own backend by downloading the TX Text Control .NET Server trial, or create a 30-day trial access token to use a hosted backend:

Download Trial Version Setup download and installation required. Create Trial Access Token No download and local installation required.

Creating the Angular Application

This tutorial shows how to create your first Angular application using the TX Text Control document editor.

Prerequisites

Create your free trial access token here:

Create Access Token

Install Node.js and npm, if not done before.

Open a Command Prompt and install the Angular CLI globally by typing in the following command:

npm install -g @angular/cli

This tutorial uses Visual Studio Code that can be downloaded for free.

Creating the Angular Project

Open a Command Prompt and create a new project and default app by typing in the following command:

ng new my-viewer-app

Follow the questions in the command prompt by confirming CSS as your preferred stylesheet format and 'N' to disable Server-Side Rendering and Static Site Generation.

Change into the created folder by typing in the following command:

cd my-viewer-app Install the TX Text Control Document Viewer package by typing in the following command:

npm i @txtextcontrol/tx-ng-document-viewer --legacy-peer-deps

Open this folder in Visual Studio Code by typing in the following command:

code . In Visual Studio Code, open the file src -> app -> app.component.ts , add replace the complete content with the following code and save it:

import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { DocumentViewerModule } from '@txtextcontrol/tx-ng-document-viewer';

@Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet, DocumentViewerModule], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'my-viewer-app'; } Open the file src -> app -> app.component.html , add replace the complete content with the following code, replace yourtoken with your given Trial Access Token and save it:

Backend Server

The code above uses a hosted demo backend server specified by the basePath property. If you are hosting your own required backend server, replace the URL with your backend endpoint.

Back in the command prompt, start the Angular application by typing in the following command:

ng serve --open

TX Text Control .NET Server

DS Server

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

Blog

Core Technologies

Blog

Authors

Latest Posts

Support Resources

Documentation

Support

Getting Started

Other Resources

About Us

Industry events

Company

Contact

Newsletter

Legal

Sign in

Create account

Text Control Account

Angular v18

Post tagged with Angular v18 in 2024

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

​

Latest Posts

​

Support

Getting Started

​

Other Resources

Company

Contact

Newsletter

Legal

Text Control Account

​

​

Angular v18

Post tagged with Angular v18 in 2024 ​

November 2024

Post tagged with Angular v18 in 2024