I want to modify some features in angular. how I can modify client-side ( angular) end in [GroupDocs.Annotation-for-.NET-MVC].
In a simple project, I haven’t find the files of angular.
kindly guide me and also share some references about it. It would be easier and helpful for me.
Thanks
We used this Angular based UI in our MVC application. Please have a look at this integration guide. You can modify the client side code following the advanced scenario from the guide.
Dear @Atir_Tahir, you share Groupdocs.Total angular file but I need Groupdocs.Annotation angular file. I am integrating Groupdocs.Annotation in my asp.net MVC project.
need the above project client-side (angular) files.
Dear @Atir_Tahir, I have a stupid question. I hope you don’t mind. Dear, I was tried to implement the angular project but I am facing issues.
Kindly share the complete guide regarding how to integrate Groupdocs.annotation front end in angular from scratch.
Could you please share the issues you are facing? It’d be better if you share a screencast/video of the issues that you are facing.
Dear @Atir_Tahir, I am trying to update some code within common components, but no changes show on the web. I think it’s not updated.
image.png (318.9 KB)
You don’t have to use npm install after making the changes. Are you following the Advanced Scenario here?
Dear, @Atir_Tahir, the annotation folder ts files are working and updating fine, but the issue only in the common-components folder, in this folder files are not updating.
We are investigating this scenario. Your issue is logged here. We’ll notify you in case of any update.
For us to better understand the issue, please share following details:
Thanks.
Best Regards,
Pavel
If i follow the advanced scenario article then i have facing that issue plz find attachment.
image.png (310.6 KB)
and also here is my code and files plz find the attachment
image.png (259.6 KB)
Dear, kindly file the attachment files, i have shared the file and code snap which is used in my project
app.component.html
image.png (346.7 KB)
app.component.ts
image.png (306.3 KB)
app.component.less
image.png (249.7 KB)
dear, can you chat live?
dear, how i can integrate annotation tool frontend and api in my existing asp.net mvc project, kindly also some stuff . its would be easy for me.
@ImRizwan Thank for sharing screenshots. As you can see on your first screenshot with error message the error acquires in the code lines 20, 22 and 23 but these lines are hidden. Could you please expand code blocks started on code lines 6 and 20 and share it with us. It would be very useful if you share source code as text, not as a screenshot…
Best regards.
<gd-loading-mask [loadingMask]="isLoading"></gd-loading-mask>
<div class="wrapper" (contextmenu)="onRightClick($event)">
<div class="annotation-wrapper wrapper">
<gd-tabbed-toolbars [logo]="'annotation'" [icon]="'pen-square'">
<gd-tabs>
<!-- <gd-tab [tabTitle]="'File'" [icon]="'folder-open'" [id]="'1'">
<div id="files-tools" class="toolbar-panel">
<gd-button [icon]="'folder-open'" [tooltip]="'Browse files'" (click)="openModal(browseFilesModal)"
*ngIf="browseConfig"></gd-button>
<gd-button [disabled]="formatDisabled" [icon]="'download'" [tooltip]="'Download'"
(click)="downloadFile()" *ngIf="downloadConfig"></gd-button>
<gd-button [disabled]="formatDisabled" [icon]="'save'" [tooltip]="'Save'" (click)="annotate()"></gd-button>
<gd-button class="desktop-hide" [disabled]="formatDisabled" [icon]="'search-plus'" [tooltip]="'Zoom In'"
(click)="zoomIn()" *ngIf="zoomConfig"></gd-button>
<gd-button class="desktop-hide" [disabled]="formatDisabled" [icon]="'search-minus'" [tooltip]="'Zoom Out'"
(click)="zoomOut()" *ngIf="zoomConfig"></gd-button>
</div>
</gd-tab> -->
<gd-tab [tabTitle]="'Annotations'" [icon]="'highlighter'" [id]="'2'" [active]="true"
*ngIf="isDesktop || (!isDesktop && codesConfigFirst())">
<div class="toolbar-panel">
<div *ngFor="let annotationType of (isDesktop ? annotationTypes : annotationTypeFirst)">
<gd-top-tab [disabled]="!file" *ngIf="isVisible(annotationType.id)"
[icon]="annotationType.icon" (activeTab)="activeTab($event)"
[id]="annotationType.id" [tooltip]="annotationType.name">
</gd-top-tab>
</div>
<gd-button [disabled]="formatDisabled" [icon]="'save'" [tooltip]="'Save'" (click)="annotate()"></gd-button>
</div>
</gd-tab>
<gd-tab [tabTitle]="''" [icon]="'vector-square'" [id]="'3'" *ngIf="!isDesktop && codesConfigSecond()">
<div class="toolbar-panel">
<div *ngFor="let annotationType of annotationTypeSecond">
<gd-top-tab [disabled]="!file" *ngIf="isVisible(annotationType.id)"
[icon]="annotationType.icon" (activeTab)="activeTab($event)"
[id]="annotationType.id" [tooltip]="annotationType.name">
</gd-top-tab>
</div>
</div>
</gd-tab>
<gd-tab [tabTitle]="''" [icon]="'i-cursor'" [id]="'4'" *ngIf="!isDesktop && codesConfigThird()">
<div class="toolbar-panel">
<div *ngFor="let annotationType of annotationTypeThird">
<gd-top-tab [disabled]="!file" *ngIf="isVisible(annotationType.id)"
[icon]="annotationType.icon" (activeTab)="activeTab($event)"
[id]="annotationType.id" [tooltip]="annotationType.name">
</gd-top-tab>
</div>
</div>
</gd-tab>
</gd-tabs>
</gd-tabbed-toolbars>
<div class="doc-panel" *ngIf="file" (mousedown)="createAnnotation($event)"
(mousemove)="resizingCreatingAnnotation($event)" (mouseup)="finishCreatingAnnotation($event)"
(touchstart)="createAnnotation($event)" (touchmove)="resizingCreatingAnnotation($event)"
(touchend)="finishCreatingAnnotation($event)"
(panstart)="createAnnotation($event)" (panmove)="resizingCreatingAnnotation($event)"
(panend)="finishCreatingAnnotation($event)">
<gd-document class="gd-document" *ngIf="file" [file]="file" [mode]="htmlModeConfig" gdScrollable
[preloadPageCount]="preloadPageCountConfig" gdRenderPrint [htmlMode]="htmlModeConfig" (onpan)="onPan($event)"></gd-document>
</div>
<gd-comment-panel *ngIf="commentOpenedId" [annotationId]="commentOpenedId"
[comments]="getComments()" (closeComments)="closeComments()">
</gd-comment-panel>
<gd-init-state [icon]="'highlighter'" [text]="'Drop file here to upload'" *ngIf="!file"
(fileDropped)="fileDropped($event)">
<!-- Click
<fa-icon [icon]="['fas','folder-open']"></fa-icon>
to open file<br>
Or drop file here -->
</gd-init-state>
</div>
<!-- <gd-browse-files-modal (urlForUpload)="upload($event)" [files]="files" (selectedDirectory)="selectDir($event)"
(selectedFileGuid)="selectFile($event, null, browseFilesModal)"
[uploadConfig]="uploadConfig"></gd-browse-files-modal> -->
<gd-error-modal></gd-error-modal>
<gd-password-required></gd-password-required>
<gd-success-modal></gd-success-modal>
<svg class="svg" xmlns="http://www.w3.org/2000/svg">
<defs xmlns="http://www.w3.org/2000/svg">
<marker id="end" orient='auto' markerWidth='20' markerHeight='20'
refX="10" refY="10" markerUnits="strokeWidth">
<path d='M0,7 L0,13 L12,10 z' fill='#579AF0'></path>
</marker>
<marker id="start" orient='auto' markerWidth='20' markerHeight='20'
refX="0" refY="10" markerUnits="strokeWidth">
<path d='M12,7 L12,13 L0,10 z' fill='#579AF0'></path>
</marker>
</defs>
</svg>
</div>@ImRizwan Thank you for sharing source code. I have checked it and found out next:
You have missed several imports In the app.module.ts file. Please add next to the imports block:
BrowserModule, HttpClientModule, BrowserAnimationsModule, FormsModule,
If you will have any issues or questions please feel free to contact us.
Best regards.