View in Angular Document Editor Component

26 Jun 20243 minutes to read

Web Layout

DocumentEditorContainer component allows you to change the view to web layout and print 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://services.syncfusion.com/angular/production/api/documenteditor/';
        this.container.layoutType='Continuous';
    }

}

Note: Default value of layoutType in DocumentEditorContainer component is Pages.

Ruler

Using ruler we can refer to setting specific margins, tab stops, or indentations within a document to ensure consistent formatting in Document Editor.

The following example illustrates how to enable ruler in Document 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));

Heading Navigation Pane

Using the heading navigation pane allows users to swiftly navigate documents by heading, enhancing their ability to move through the document efficiently.

The following example demonstrates how to enable the heading navigation pane in a document 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://services.syncfusion.com/angular/production/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 {
    }
}