How to Change Document View in Angular DOCX Editor

27 Aug 20264 minutes to read

How to change the document view in the DocumentEditor component

Angular DOCX Editor allows you to change the view to web layout or print layout using the layoutType property with the supported LayoutType.

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import {
    DocumentEditorComponent, PrintService, SfdtExportService, WordExportService, TextExportService, SelectionService,
    SearchService, EditorService, ImageResizerService, EditorHistoryService, ContextMenuService,
    OptionsPaneService, HyperlinkDialogService, TableDialogService, BookmarkDialogService, TableOfContentsDialogService,
    PageSetupDialogService, StyleDialogService, ListDialogService, ParagraphDialogService, BulletsAndNumberingDialogService,
    FontDialogService, TablePropertiesDialogService, BordersAndShadingDialogService, TableOptionsDialogService,
    CellOptionsDialogService, StylesDialogService
} from '@syncfusion/ej2-angular-documenteditor';

@Component({
      selector: 'app-root',
      template: `<ejs-documenteditor id="container" #documenteditor_default serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" height="330px" style="display:block" [isReadOnly]="false" [enableSelection]="true"
      [enablePrint]="true" [enableSfdtExport]="true" [enableWordExport]="true" [enableOptionsPane]="true" [enableContextMenu]="true"
      [enableHyperlinkDialog]="true" [enableBookmarkDialog]="true" [enableTableOfContentsDialog]="true" [enableSearch]="true"
      [enableParagraphDialog]="true" [enableListDialog]="true" [enableTablePropertiesDialog]="true" [enableBordersAndShadingDialog]="true"
      [enablePageSetupDialog]="true" [enableStyleDialog]="true" [enableFontDialog]="true" [enableTableOptionsDialog]="true"
      [enableTableDialog]="true" [enableImageResizer]="true" [enableEditor]="true" [enableEditorHistory]="true" (created)="onCreate()">
      </ejs-documenteditor>`,
      encapsulation: ViewEncapsulation.None,
      providers: [PrintService, SfdtExportService, WordExportService, TextExportService, SelectionService, SearchService, EditorService,
          ImageResizerService, EditorHistoryService, ContextMenuService, OptionsPaneService, HyperlinkDialogService, TableDialogService,
          BookmarkDialogService, TableOfContentsDialogService, PageSetupDialogService, StyleDialogService, ListDialogService,
          ParagraphDialogService, BulletsAndNumberingDialogService, FontDialogService, TablePropertiesDialogService,
          BordersAndShadingDialogService, TableOptionsDialogService, CellOptionsDialogService, StylesDialogService]
})

export class AppComponent {
    @ViewChild('documenteditor_default')
    public container: DocumentEditorComponent;
    onCreate(): void {
        this.container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
        this.container.layoutType='Continuous';
    }
}

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.

Default value of layoutType in the DocumentEditor component is Pages.

How to change the document view in the DocumentEditorContainer component

The DocumentEditorContainer component allows you to change the view to web layout or print layout using the layoutType property with the supported LayoutType.

/**
 * Add below codes in app.component.ts file
 */
@Component({
      selector: 'app-root',
      template: '<ejs-documenteditorcontainer #documenteditor_default [enableToolbar]=true (created)="onCreate()" height="600px" style="display:block;"></ejs-documenteditorcontainer>',
      encapsulation: ViewEncapsulation.None,
      providers: [ToolbarService]
})
export class AppComponent {
    @ViewChild('documenteditor_default')
    public container: DocumentEditorContainerComponent;

    onCreate(): void {
        this.container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
        this.container.layoutType='Continuous';
    }

}

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.

Default value of layoutType in the DocumentEditorContainer component is Pages.