How to enable ruler in Angular Document Editor component

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));

How to enable ruler in Document Editor Container component

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

The following example illustrates how to enable ruler in Document Editor Container.

app.component.ts

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


import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { ToolbarService, DocumentEditorContainerComponent } from '@syncfusion/ej2-angular-documenteditor';

/**
 * Document Editor Component
 */
@Component({
  imports: [
    ButtonModule,
    DocumentEditorContainerModule
  ],


  standalone: true,
  selector: 'app-container',
  template: `<button id='export'(click)="onClick()">Show/Hide Ruler</button>
      <ejs-documenteditorcontainer #documenteditor_default height="600px" style="width:100%;display:block" [enableToolbar]=true [documentEditorSettings]= "enableRuler" ></ejs-documenteditorcontainer>`,
  encapsulation: ViewEncapsulation.None,
  providers: [ToolbarService]
})
export class AppComponent {
  @ViewChild('documenteditor_default')
  public container!: DocumentEditorContainerComponent;
  public enableRuler = { showRuler: true };
  onClick(): void {
    this.container.documentEditorSettings.showRuler = !this.container.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));