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

GroupDocs.Annotation Product Family
1

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:
\node_modules@groupdocs.examples.angular

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.

2

@samuelphung

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

3

@samuelphung

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

  1. Download annotation sample project https://github.com/groupdocs-annotation/GroupDocs.Annotation-for-.NET-WebForms/archive/master.zip

  2. Open WebForms solution

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

  4. Copy content from https://github.com/groupdocs-total/GroupDocs.Total-Angular/blob/master/libs/annotation/src/lib/annotation-app.component.html to app.component.html

  5. Copy content from https://github.com/groupdocs-total/GroupDocs.Total-Angular/blob/master/libs/annotation/src/lib/annotation-app.component.less to app.component.less

  6. Create variables.less with this content (https://github.com/groupdocs-total/GroupDocs.Total-Angular/blob/master/libs/common-components/src/styles/variables.less) 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 {
  AddDynamicComponentService,
  HostingDynamicComponentService,
  ModalService,
  NavigateService, PagePreloadService, PasswordService,
  TopTabActivatorService, UploadFilesService,
  WindowService,
  ZoomService
} from "@groupdocs.examples.angular/common-components";

@Component({
  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) {
      super(_annotationService,
        _modalService,
        _navigateService,
        _tabActivatorService,
        _hostingComponentsService,
        _addDynamicComponentService,
        _activeAnnotationService,
        _removeAnnotationService,
        _commentAnnotationService,
        uploadFilesService,
        pagePreloadService,
        passwordService,
        _windowService,
        _zoomService,
        configService
      )
    }
}
  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";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AnnotationModule,
    FontAwesomeModule
  ],
  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.

4

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 ?

Sam

5

@samuelphung

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.

6

@samuelphung

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, "https://softmap.ru/upload/uf/f44/f44385fcaae32331408c179d25ff6072.png", true).subscribe((data) => {
        this.selectDir("");
        this.selectFile(data["guid"], "", "");
});