--- title: "Integrating DocuVieware in your Angular2 client application" canonical_url: "https://www.nutrient.io/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-angular2-client-application/" md_url: "https://www.nutrient.io/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-angular2-client-application.md" last_updated: "2026-05-18T15:55:45.958Z" description: "Integrate the DocuVieware control into your Angular2 client application with setup and implementation steps." --- # Integrating DocuVieware in your Angular2 client application > This guide focuses on integrating the DocuVieware control into a client application. Follow the [serving DocuVieware through a REST API](https://www.nutrient.io/guides/docuvieware/other-technologies/serving-docuvieware-through-a-rest-api.md) guide. > Find the source code for both the REST service and integration examples in your `[INSTALL FOLDER]\Samples\ASP.NET\DocuVieware` folder. **Legacy guide notice** This guide uses Angular 2 with ASP.NET Web API on.NET Framework 4.6. Angular 2 and.NET Framework 4.6 are no longer recommended for new applications. This guide is intended for maintaining existing applications or environments with fixed legacy constraints. ## Prerequisite DocuVieware requires its own JavaScript that can be found in your `[SDK INSTALL DIR]\Redist\DocuVieware (Resources)` folder. In the following examples, it’s assumed that they’re available locally. Below is what’s needed in your `` section: ```html ``` The last thing required is the complete and accurate URL your REST service is reachable at. For this guide, it’s assumed that the service is locally running on the machine using port `62968`. The complete URL to the method is: ```text http://localhost:62968/api/DocuViewareREST/GetDocuViewareControl ``` Your own implementation will mostly differ — especially the port that's usually randomly selected upon project creation by Visual Studio. Adapt the URL to your configuration. ## Integration using Angular2 > This guide assumes you have all the Angular and Node.js prerequisites and modules installed and set up. To integrate DocuVieware in an Angular2 client application, create a DocuVieware component and service so it can be inserted in the HTML using a `` tag. First, the service — this is the part that actually accesses the REST API through a `POST` request that returns the control markup. This is also where you set the control properties as needed: ```typescript import { Injectable } from '@angular/core'; import { Http, Response, Headers, RequestOptions } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/Rx'; @Injectable() export class DocuViewareService { headers: Headers; options: RequestOptions; constructor(private http: Http) { this.headers = new Headers({ 'Content-Type': 'application/json' }); this.options = new RequestOptions({ headers: this.headers }); } getDocuViewareMarkup() { let docuViewareConfig = { SessionId: 'mySessionId', //Set to an arbitrary value, should be replaced by the session identifier from your session mechanism ControlId: 'DocuVieware1', AllowPrint: true, EnablePrintButton: true, AllowUpload: true, EnableFileUploadButton: true, CollapsedSnapIn: true, ShowAnnotationsSnapIn: true, EnableRotateButtons: true, EnableZoomButtons: true, EnablePageViewButtons: true, EnableMultipleThumbnailSelection: true, EnableMouseModeButtons: true, EnableFormFieldsEdition: true, EnableTwainAcquisitionButton: true }; let body = JSON.stringify(docuViewareConfig); return this.http.post('http://localhost:62968/api/DocuViewareREST/GetDocuViewareControl', body, this.options).map(this.extractData).catch(this.handleError); } private extractData(res: Response) { let body = res.json(); return body || {}; } private handleError(error: any) { let errMsg = (error.message)? error.message : error.status? `${error.status} - ${error.statusText}` : 'Server error'; console.error(errMsg); return Observable.throw(errMsg); } } ``` Next, create the component that handles the `` tag using the newly created service. This is where the DocuVieware CSS is injected, so make it available locally (similar to the JavaScript, you’ll find it in your `[SDK INSTALL DIR]\Redist\DocuVieware (Resources)` folder): ```typescript import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { DocuViewareService } from './docuvieware.service' @Component({ selector: 'docuvieware', template: `
`, styleUrls: ['docuvieware-min.css'], encapsulation: ViewEncapsulation.None }) export class DocuViewareComponent implements OnInit { htmlContent: any; constructor(private docuviewareService: DocuViewareService) { } ngOnInit(): void { this.docuviewareService.getDocuViewareMarkup().subscribe( response => this.insertElement(response["HtmlContent"]), error => this.htmlContent = error ); } insertElement(content: string): void { const fragment = document.createRange().createContextualFragment(content); document.getElementById("dvContainer").appendChild(fragment); } } ``` Wrap it in an `app.module.ts` file so it can be injected in the `main.ts` file: ```typescript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { DocuViewareService } from './docuvieware.service' import { DocuViewareComponent } from './docuvieware.component' @NgModule({ imports: [BrowserModule, HttpModule], declarations: [DocuViewareComponent], providers: [DocuViewareService], bootstrap: [DocuViewareComponent] }) export class AppModule { } ``` ```typescript import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; platformBrowserDynamic().bootstrapModule(AppModule); ``` ## Related guides - [Serving DocuVieware through a REST API](https://www.nutrient.io/guides/docuvieware/other-technologies/serving-docuvieware-through-a-rest-api.md) - [Client/server coming and going with custom actions](https://www.nutrient.io/guides/docuvieware/other-technologies/rest-client-server-coming-and-going-with-custom-actions.md) - [Use and handling of the selection area](https://www.nutrient.io/guides/docuvieware/other-technologies/rest-use-and-handling-of-the-selection-area.md) - [Custom snap-in implementation](https://www.nutrient.io/guides/docuvieware/other-technologies/rest-custom-snap-in-implementation.md) --- ## Related pages - [Integrating DocuVieware in your AngularJS client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-angularjs-client-application.md) - [How to set up and use DocuVieware with React](/guides/docuvieware/other-technologies/how-to-set-up-and-use-docuvieware-with-react.md) - [DocuVieware guide for Blazor](/guides/docuvieware/other-technologies/docuvieware-tutorial-for-blazor.md) - [Introduction](/guides/docuvieware/other-technologies.md) - [Integrating DocuVieware in your JavaScript/jQuery client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-javascript-jquery-client-application.md) - [Integrating DocuVieware in your Java client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-java-client-application.md) - [Integrating DocuVieware in your PHP client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-php-client-application.md) - [Integrating DocuVieware into SharePoint 2019](/guides/docuvieware/other-technologies/integrating-docuvieware-into-sharepoint-2019.md) - [Integrating DocuVieware in your Node.js client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-nodejs-client-application.md) - [Integrating DocuVieware in your ASP.NET Core MVC Razor client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-asp-dotnet-core-mvc-razor-client-application.md) - [Use and handling of the selection area](/guides/docuvieware/other-technologies/rest-use-and-handling-of-the-selection-area.md) - [Custom snap-in implementation](/guides/docuvieware/other-technologies/rest-custom-snap-in-implementation.md) - [Client/server coming and going with custom actions](/guides/docuvieware/other-technologies/rest-client-server-coming-and-going-with-custom-actions.md) - [Integrating DocuVieware in your ASP.NET MVC Razor client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-asp-dotnet-mvc-razor-client-application.md) - [Your first Angular 10 application with DocuVieware](/guides/docuvieware/other-technologies/your-first-angular-10-application-with-docuvieware.md) - [Serving DocuVieware through a REST API](/guides/docuvieware/other-technologies/serving-docuvieware-through-a-rest-api.md) - [Integrating DocuVieware with Electron](/guides/docuvieware/other-technologies/integrating-docuvieware-with-electron.md)