Change Angular Viewer UI

GroupDocs.Viewer Product Family
1

Hi,

I would like to know what is the easiest way to do some UI change to the angular viewer?
For example I need to do the following:

  1. Remove or show file name instead of VIEWER in the top left corner
  2. Hide “Click to upload” file in the middle of the screen
  3. Change default colors

Thanks,
Roman

2

@riupko

To do these UI changes you’ll have to copy contents from the sources into your Angular app. Let me create a sample app and show what should be changed.

  1. Create a minimal Angular app for simplicity with ng new viewer-app --minimal (select Less stylesheet format in wizard)
  2. Navigate to folder with the app cd viewer-app
  3. Install Angular Viewer package npm i @groupdocs.examples.angular/viewer
  4. Update app.module.ts file to
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; 
import { APP_BASE_HREF } from '@angular/common';
import { AppComponent } from './app.component';
import { ConfigService } from '@groupdocs.examples.angular/common-components';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { ViewerModule, ViewerTranslateLoader } from '@groupdocs.examples.angular/viewer';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';

export function configServiceFactory() {
  let config = new ConfigService();
  config.apiEndpoint = "http://localhost:8080"; // set your api endpoint
  return config;
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    ViewerModule,
    FontAwesomeModule, 
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: ViewerTranslateLoader
      }
    }) 
  ],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/' },
    {
      provide: ConfigService,
      useFactory: configServiceFactory
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
  1. Update app.component.ts to
import { Component, ChangeDetectorRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { ViewerAppComponent, ViewerService, ViewerConfigService } from '@groupdocs.examples.angular/viewer';
import { ConfigService, ModalService, UploadFilesService, NavigateService, ZoomService, PagePreloadService, RenderPrintService, PasswordService, WindowService, LoadingMaskService } from '@groupdocs.examples.angular/common-components';

import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.less', './variables.less']
})
export class AppComponent extends ViewerAppComponent {

    configService: ConfigService;
    viewerService: ViewerService;
    pagesLoading: number[];
    http: HttpClient;

    constructor(viewerService: ViewerService,
        modalService: ModalService,
        viewerConfigService: ViewerConfigService,
        uploadFilesService: UploadFilesService,
        navigateService: NavigateService,
        zoomService: ZoomService,
        pagePreloadService: PagePreloadService,
        renderPrintService: RenderPrintService,
        passwordService: PasswordService,
        windowService: WindowService,
        loadingMaskService: LoadingMaskService,
        cdr: ChangeDetectorRef,
        translate: TranslateService) {

        super(viewerService,
            modalService,
            viewerConfigService,
            uploadFilesService,
            navigateService,
            zoomService,
            pagePreloadService,
            renderPrintService,
            passwordService,
            windowService,
            loadingMaskService,
            cdr,
            translate);
    }
}
  1. Create app.component.html file in the .\src\app folder and copy contents from viewer-app.component.html file
  2. Create app.component.less file in the same folder and and copy contents from viewer-app.component.less file
  3. Update app.component.less and replace @import "../../../common-components/src/styles/variables"; with `@import “./variables”;
  4. Create variables.less file in the same folder and copy contents from variables.less file
  5. Run the app with ng serve and navigate to http://localhost:4200/
  6. Optional. In case you need a simple API you can use self_host_api.zip app that can be runned with dotnet run

At this point, you have full control over UI.

To remove or show file name instead of VIEWER navigate to app.component.html file and either

  • remove <gd-logo [logo]="'viewer'" icon="eye"></gd-logo>
  • update <gd-logo [logo]="'viewer'" icon="eye"></gd-logo> to <gd-logo *ngIf="file" logo="{{getFileName()}}" icon="eye"></gd-logo>

Remove the block that starts with <gd-init-state... in app.component.html

You can change default colors in app.component.less and variables.less files.

The complete sample application can be downloaded at viewer-app.zip.

Let us know if you have any questions.

3

Thank you! It worked!

Happy New Year!
Roman

4

@riupko

You’re welcome!

Happy New Year!

5

Hello Vladimir,

Same application I am trying to execute then getting below error:
image.png (58.1 KB)

Please help me to resolve this issue on urgent basis.

6

@vladimir.litvinchik @riupko

I am also facing issue while trying to execute the source code.
Please help me to resolve the issue:

image.png (59.3 KB)

7

@3iinfo

Please follow Regarding Viewer Integration - #4 by 3iinfo tread.