Guidance on extending Angular UI functions for the GroupDocs.Annotation for .NET demo

Both of the WebForms and MVC demo for GroupDocs.Annotation are using Angular front-end, with all of GroupDocs.Annotation 's Angular codes placed in the following node_modules folder:

Is there documentation available showing how to extend the Angular UI codes ?

Please provide guidance showing the approach to implement additional function to the Angular UI, such as launch a specific document, based on document-ID as part of the query string.


We are looking into this scenario. You will be notified about the outcomes soon.


Please follow the given steps to extend Angular UI for Annotation:

  1. Download annotation sample project

  2. Open WebForms solution

  3. Navigate to folder .\GroupDocs.Annotation-for-.NET-WebForms-master\src\client\apps\annotation\src\app

  4. Copy content from to app.component.html

  5. Copy content from to app.component.less

  6. Create variables.less with this content ( in project and update link to the newly create file from in app.component.less line:2

  7. Update app.component.ts with the following code

import { Component } from '@angular/core';
import { ActiveAnnotationService, AnnotationAppComponent, AnnotationConfigService, AnnotationService, CommentAnnotationService, RemoveAnnotationService } from '@groupdocs.examples.angular/annotation';
import {
  NavigateService, PagePreloadService, PasswordService,
  TopTabActivatorService, UploadFilesService,
} from "@groupdocs.examples.angular/common-components";

  selector: 'client-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
export class AppComponent extends AnnotationAppComponent {
  title = 'annotation';

  constructor(_annotationService: AnnotationService,
    _modalService: ModalService,
    _navigateService: NavigateService,
    _tabActivatorService: TopTabActivatorService,
    _hostingComponentsService: HostingDynamicComponentService,
    _addDynamicComponentService: AddDynamicComponentService,
    _activeAnnotationService: ActiveAnnotationService,
    _removeAnnotationService: RemoveAnnotationService,
    _commentAnnotationService: CommentAnnotationService,
    uploadFilesService: UploadFilesService,
    pagePreloadService: PagePreloadService,
    passwordService: PasswordService,
    _windowService: WindowService,
    _zoomService: ZoomService,
    configService: AnnotationConfigService) {
  1. Update app.module.ts with the following code
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AnnotationModule } from "@groupdocs.examples.angular/annotation";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";

  declarations: [AppComponent],
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule {}
  1. Open terminal and move to this folder .\GroupDocs.Annotation-for-.NET-WebForms-master\src\client

  2. Run ‘npm install’ command

  3. Run ‘npm run build’ command

  4. Build and run WebForms solution (from step 2)

Note Every time you make changes to Angular app project, you must run ‘npm run build’ command in order to see your changes on the Web page.

That’s how you can setup annotation project locally and update it however you want. You can check source code in this repo. This may help you understand project better.

Thank You for the instructions.

For this sample project, there is a setting in the configuration.yml file that specify the defaultDocument to load, filesDirectory, outputDirectory and etc…

How do I load a document (or graphic file) via memory-stream from a Web API ?



This is not possible at the moment. However, we have already logged a feature request. Please keep track of this GitHub issue. We’ll notify you here as well in case of any update.


Please have a look at the following workaround:

Upload file programmatically
You can do this via _annotationService. You could add following code after constructor in app.component.ts:

_annotationService.upload(null, "", true).subscribe((data) => {
        this.selectFile(data["guid"], "", "");