This blog post contains outdated information.
The cited code snippets may be workarounds, and be part of the official API in the meantime.
Create your First, Very Simple Angular Application with the TX Text Control Widget
This tutorial shows how to create a first, very simple Angular application with the TX Text Control Widget.
The HTML5 based editor available for MVC and Web Forms is an ASP.NET component that requires a Windows Server and IIS. The Widget implementation can be hosted on a separate server or easily deployed using Docker Containers and used in any platform including Angular, Node.js or .NET Core.
This beginner tutorial shows how to create a simple Angular application and how to add the widget to a component. This tutorial is based on the QuickStart tutorial documented on the official Angular website.
-
Development Environment
-
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
-
-
Create a new project
-
Open a Command Prompt and create a new project and default app by typing in the following command:
ng new my-app
-
-
Adding the widget
-
Open src/app/app.component.css and add some CSS to the widget:
#myTextControlContainer { width: 1000px; height: 500px; margin-bottom: 20px; } -
Open src/app/app.component.html and add the widget DIV container:
<div id="myTextControlContainer"></div> -
Finally, open the main HTML file src/index.html and add the widget JavaScript to the HEAD element and a global variable to access the Text Control object for demo purposes. In real-world applications, you might want to import the JavaScript and export the interface to TypeScript.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>MyApp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <script src="https://labs.textcontrol.com/widget/scripts/txtextcontrol.web.js"></script> </head> <body> <app-root></app-root> <script> var textControl1; window.onload = function() { textControl1 = new TXTextControlWeb("myTextControlContainer"); }; </script> </body> </html>In this step, if you host the widget on your own server, change the location of the script.
-
-
Serve the Application
-
Open a Command Prompt, change to the project directory and serve the application by typing in the following command:
ng serve --openYour default browser will be opened with your served application.
-
-
Accessing the Widget API
-
The global variable textControl1 can now be used to access the API. The following sample JavaScript will load an HTML document into the editor:
function loadDocument() { textControl1.loadDocument( TXTextControl.StreamType.HTMLFormat, '<strong>This is a test</strong>'); }
-
Jump to the other posts in this series:
- Create your First, Very Simple Angular Application with the TX Text Control Widget
- Deploying an Angular Application using the TX Text Control Widget
Angular
Integrate document processing, editing, sharing, collaboration, creation, electronic signatures, and PDF generation into your Angular Web applications.
Related Posts
Integrate Document Editing into any HTML Client using the HTML Widget
The HTML widget can be used to integrate document editing into any HTML client including vanilla HTML, Angular, node.JS and any other client-side framework.
Deploying an Angular Application using the TX Text Control Widget
This article gives an overview of a typical deployment structure when using the TX Text Control widget within an Angular application.
Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor…
This article shows how to create a backend for the Document Editor and Viewer using ASP.NET Core. The backend can be hosted on Windows and Linux and can be used in Blazor, Angular, JavaScript, and…
Impressions from .NET Developer Conference DDC 2024
This week we sponsored the .NET Developer Conference DDC 2024 in Cologne, Germany. It was a great event with many interesting talks and workshops. Here are some impressions of the conference.
Back from Florida: Impressions from VSLive! Orlando 2024
We had an incredible time showcasing our digital document processing SDKs at VSLive! Orlando 2024 as a silver sponsor! Throughout the event, we interacted with hundreds of developers, shared…