Disable header and footer edit in document editor in Angular Document editor component

4 Apr 20236 minutes to read

You can use restrictEditing property to disable header and footer editing based on selection context type.

RestrictEditing allows you to restrict the document modification and makes the Document read only mode. So, by using this property, and if selection inside header or footer, you can set this property as true.

The following example code illustrates how to header and footer edit in DocumentEditorContainer instance.

import { Component, OnInit, ViewChild } from '@angular/core';
import {
  ToolbarService,
  DocumentEditorContainerComponent,
} from '@syncfusion/ej2-angular-documenteditor';
@Component({
      selector: 'app-root',
      // specifies the template string for the DocumentEditorContainer component
      template: `<ejs-documenteditorcontainer #documenteditor_default serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/" height="600px" style="display:block" [enableToolbar]=true (selectionChange)="selectionChanges()"> </ejs-documenteditorcontainer>`,
      providers: [ToolbarService],
})
export class AppComponent implements OnInit {
  @ViewChild('documenteditor_default')
  public container: DocumentEditorContainerComponent;
  ngOnInit(): void {}
  selectionChanges() {
    // Check whether selection is in header
    if (this.container.documentEditor.selection.contextType.indexOf('Header') > -1 ||
      // Check whether selection is in Footer
      this.container.documentEditor.selection.contextType.indexOf('Footer') > -1 ) {
      // Change the document to read only mode
      this.container.restrictEditing = true;
    } else {
      // Change the document to editable mode
      this.container.restrictEditing = false;
    }
  }
}

Otherwise, you can disable clicking inside Header or Footer by using closeHeaderFooter API in selection module.

The following example code illustrates how to close header and footer when selection is inside header or footer in DocumentEditorContainer instance.

import { Component, OnInit, ViewChild } from '@angular/core';
import {
  ToolbarService,
  DocumentEditorContainerComponent,
} from '@syncfusion/ej2-angular-documenteditor';
@Component({
      selector: 'app-root',
      // specifies the template string for the DocumentEditorContainer component
      template: `<ejs-documenteditorcontainer #documenteditor_default serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/" height="600px" style="display:block" [enableToolbar]=true (selectionChange)="selectionChanges()"> </ejs-documenteditorcontainer>`,
      providers: [ToolbarService],
})
export class AppComponent implements OnInit {
  @ViewChild('documenteditor_default')
  public container: DocumentEditorContainerComponent;
  ngOnInit(): void {}
  selectionChanges() {
    // Check whether selection is in header
    if (this.container.documentEditor.selection.contextType.indexOf('Header') > -1 ||
      // Check whether selection is in Footer
      this.container.documentEditor.selection.contextType.indexOf('Footer') > -1 ) {
      // Close header Footer
    this.container.documentEditor.selection.closeHeaderFooter();
    }
  }
}

Like restrictEditing, you can use isReadOnly property in Document editor to disable header and footer edit.

The following example code illustrates how to header and footer edit in DocumentEditor instance.

// import { Component, OnInit, ViewChild } from '@angular/core';
// import {
//   ToolbarService,
//   DocumentEditorContainerComponent,
// } from '@syncfusion/ej2-angular-documenteditor';
// @Component({
//   selector: 'app-root',
//   // specifies the template string for the DocumentEditorContainer component
//   template: `<ejs-documenteditorcontainer #documenteditor_default serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/" height="600px" style="display:block" [enableToolbar]=false (selectionChange)="selectionChanges()"> </ejs-documenteditorcontainer>`
// })
// export class AppComponent implements OnInit {
//   @ViewChild('documenteditor_default')
//   public container: DocumentEditorContainerComponent;
//   ngOnInit(): void {}
// }

import { Component, ViewEncapsulation, ViewChild } 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 #documenteditor_default serviceUrl="https://ej2services.syncfusion.com/production/web-services/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 (selectionChange)="selectionChanges()">
      </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 documentEditor: DocumentEditorComponent;
    selectionChanges() {
        // Check whether selection is in header
     if (this.documentEditor.selection.contextType.indexOf('Header') > -1 ||
     // Check whether selection is in Footer
     this.documentEditor.selection.contextType.indexOf('Footer') > -1) {
       // Change the document to read only mode
       this.documentEditor.isReadOnly = true;
     } else {
       // Change the document to editable mode
       this.documentEditor.isReadOnly = false;
     }
    };
}