View in Angular DOCX Editor

27 Aug 20265 minutes to read

Web layout

Angular DOCX Editor (Document Editor) container component allows you to change the view to a 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',
      templateUrl: '<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.

The default value of layoutType in the Document Editor Container component is Pages.

Online Demo

Explore how to view Word documents in web layout using the Angular DOCX Editor in this live demo.

Ruler

The ruler helps you set specific margins, tab stops, and indentations within a document to ensure consistent formatting in the DOCX Editor.

The following example illustrates how to enable the ruler in the DOCX Editor.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor'



import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import {
  DocumentEditorComponent, SfdtExportService, SelectionService, FontDialogService, EditorService, ContextMenuService
} from '@syncfusion/ej2-angular-documenteditor';

@Component({
  imports: [
    ButtonModule,
    DocumentEditorAllModule
  ],
  standalone: true,
  selector: 'app-container',
  //specifies the template string for the Document Editor component
  template: `<div>
      <button ejs-button (click)="btnClick()" >Show/Hide Ruler</button>
      <ejs-documenteditor #document_editor  id="container" height="330px" style="display:block" [isReadOnly]=false [enableSelection]=true
      [enableSfdtExport]=true [enableContextMenu]=true
      [enableFontDialog]=true [enableEditor]=true [documentEditorSettings]="documentEditorSettings" >
      </ejs-documenteditor>
      </div>`,
  encapsulation: ViewEncapsulation.None,
  providers: [SfdtExportService, SelectionService, FontDialogService, EditorService, ContextMenuService]
})

export class AppComponent {
  @ViewChild('document_editor')
  public documentEditor!: DocumentEditorComponent;

  public documentEditorSettings = { showRuler: true };
  public btnClick(): void {
    this.documentEditorSettings.showRuler = !this.documentEditorSettings.showRuler;
    this.documentEditor.documentEditorSettings = { showRuler: this.documentEditorSettings.showRuler };
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Online Demo

Explore how to use the ruler in the Angular DOCX Editor for working with Word documents in this live demo.

Heading Navigation Pane

The heading navigation pane allows users to quickly navigate documents by heading, making it easier to move through the document.

The following example demonstrates how to enable the heading navigation pane in a DOCX Editor.

import { Component, OnInit } from '@angular/core';
import { ToolbarService } from '@syncfusion/ej2-angular-documenteditor';
@Component({
      selector: 'app-root',
      // specifies the template string for the DocumentEditorContainer component
      template: `<ejs-documenteditorcontainer serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" height="600px" style="display:block" [documentEditorSettings]= "settings" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
      providers: [ToolbarService]
})
export class AppComponent implements OnInit {
    public settings = {showNavigationPane : true};
    ngOnInit(): void {
    }
}

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.

Online demo

Explore how to navigate through headings in Word documents using the Angular DOCX Editor in this live demo.