How to Disable Header and Footer Editing in Angular DOCX Editor

27 Aug 20268 minutes to read

Disable header and footer edit in DocumentEditorContainer instance

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 puts the document in read-only mode. So, by using this property, and if the selection is inside header or footer, you can set this property as true.

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

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

import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor';

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

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.

As an alternative to restrictEditing, you can disable clicking inside header or footer by using closeHeaderFooter API in selection module.

The following example code illustrates how to disable header and footer edit in DocumentEditorContainer instance using closeHeaderFooter API.

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

import { DocumentEditorContainerModule } from '@syncfusion/ej2-angular-documenteditor';

@Component({
  selector: 'app-container',
  standalone: true,
  imports: [DocumentEditorContainerModule],
  providers: [ToolbarService],
  template: `
    <ejs-documenteditorcontainer #documenteditor_default 
      serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" 
      height="600px" 
      style="display:block" 
      [enableToolbar]=true 
      (selectionChange)="selectionChanges()"
      >
    </ejs-documenteditorcontainer>
  `,
})
export class AppComponent implements OnInit {
  @ViewChild('documenteditor_default')
  public container?: DocumentEditorContainerComponent;
  ngOnInit(): void {}
  selectionChanges() {
    // Check whether selection is in header
    if (
      (
        this.container as DocumentEditorContainerComponent
      ).documentEditor.selection.contextType.indexOf('Header') > -1 ||
      // Check whether selection is in Footer
      (
        this.container as DocumentEditorContainerComponent
      ).documentEditor.selection.contextType.indexOf('Footer') > -1
    ) {
      // Close header Footer
      this.container?.documentEditor.selection.closeHeaderFooter();
    }
  }
}

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.

Disable header and footer edit in DocumentEditor instance

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

The following example code illustrates how to disable 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://document.syncfusion.com/web-services/docx-editor/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://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 (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;
     }
    };
}

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.