|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Redaction in mobile view in Angular PDF Viewer | Syncfusion |
| 4 | +description: Learn how to apply redactions in mobile view using the Syncfusion Angular PDF Viewer with a complete toolbar setup and redaction workflow. |
| 5 | +platform: document-processing |
| 6 | +control: PdfViewer |
| 7 | +documentation: ug |
| 8 | +--- |
| 9 | + |
| 10 | +# Redaction in Mobile View in Angular PdfViewer Component |
| 11 | + |
| 12 | +The Redaction Tool enables users to permanently mark and remove sensitive content from PDF documents in mobile view using the Angular PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices. |
| 13 | + |
| 14 | + |
| 15 | + |
| 16 | +N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. Mobile layout activates automatically on small screens. |
| 17 | + |
| 18 | +## Adding Redaction in Mobile View |
| 19 | + |
| 20 | +To enable redaction functionality in your Angular application, configure the PDF Viewer with the following setup: |
| 21 | + |
| 22 | +{% tabs %} |
| 23 | +{% highlight ts tabtitle="Standalone" %} |
| 24 | + |
| 25 | +import { Component, ViewChild } from '@angular/core'; |
| 26 | +import { |
| 27 | + PdfViewerComponent, |
| 28 | + ToolbarSettingsModel, |
| 29 | + LinkAnnotationService, |
| 30 | + BookmarkViewService, |
| 31 | + MagnificationService, |
| 32 | + ThumbnailViewService, |
| 33 | + ToolbarService, |
| 34 | + NavigationService, |
| 35 | + AnnotationService, |
| 36 | + TextSearchService, |
| 37 | + TextSelectionService, |
| 38 | + PrintService, |
| 39 | + FormFieldsService, |
| 40 | + FormDesignerService, |
| 41 | + PageOrganizerService |
| 42 | +} from '@syncfusion/ej2-angular-pdfviewer'; |
| 43 | + |
| 44 | +@Component({ |
| 45 | + selector: 'app-root', |
| 46 | + template: ` |
| 47 | + <div class="content-wrapper"> |
| 48 | + <ejs-pdfviewer |
| 49 | + #pdfviewer |
| 50 | + id="pdfViewer" |
| 51 | + [resourceUrl]="resourceUrl" |
| 52 | + [documentPath]="documentPath" |
| 53 | + [toolbarSettings]="toolbarSettings" |
| 54 | + style="height:640px;display:block"> |
| 55 | + </ejs-pdfviewer> |
| 56 | + </div> |
| 57 | + `, |
| 58 | + providers: [ |
| 59 | + LinkAnnotationService, |
| 60 | + BookmarkViewService, |
| 61 | + MagnificationService, |
| 62 | + ThumbnailViewService, |
| 63 | + ToolbarService, |
| 64 | + NavigationService, |
| 65 | + AnnotationService, |
| 66 | + TextSearchService, |
| 67 | + TextSelectionService, |
| 68 | + PrintService, |
| 69 | + FormFieldsService, |
| 70 | + FormDesignerService, |
| 71 | + PageOrganizerService |
| 72 | + ] |
| 73 | +}) |
| 74 | +export class AppComponent { |
| 75 | + @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent; |
| 76 | + |
| 77 | + // Standalone mode (CDN) – keep this version aligned with your package |
| 78 | + public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; |
| 79 | + public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; |
| 80 | + |
| 81 | + // Matches your JS toolbar configuration, with RedactionEditTool included |
| 82 | + public toolbarSettings: ToolbarSettingsModel = { |
| 83 | + toolbarItems: [ |
| 84 | + 'OpenOption', |
| 85 | + 'UndoRedoTool', |
| 86 | + 'PageNavigationTool', |
| 87 | + 'MagnificationTool', |
| 88 | + 'PanTool', |
| 89 | + 'SelectionTool', |
| 90 | + 'CommentTool', |
| 91 | + 'SubmitForm', |
| 92 | + 'AnnotationEditTool', |
| 93 | + 'RedactionEditTool', // Redaction entry in the primary toolbar |
| 94 | + 'FormDesignerEditTool', |
| 95 | + 'SearchOption', |
| 96 | + 'PrintOption', |
| 97 | + 'DownloadOption' |
| 98 | + ] |
| 99 | + }; |
| 100 | +} |
| 101 | + |
| 102 | +{% endhighlight %} |
| 103 | +{% endtabs %} |
| 104 | + |
| 105 | +## Understanding Mobile Redaction Toolbar Tools |
| 106 | + |
| 107 | +When you enter redaction mode in mobile view, a specialized redaction toolbar appears with multiple tools optimized for touch interaction. Each tool serves a specific purpose in the redaction workflow. |
| 108 | + |
| 109 | +### Redaction Annotation Tool |
| 110 | + |
| 111 | +The Redaction Annotation tool is the primary redaction feature that allows you to draw redaction rectangles on specific content: |
| 112 | + |
| 113 | +Function: Creates visual redaction annotations that mark content for permanent removal |
| 114 | +Usage: |
| 115 | +Touch and drag to draw rectangular redaction overlays on any content area. |
| 116 | + |
| 117 | +Process: |
| 118 | +- Selected content appears with a customizable overlay (default black) |
| 119 | +- Annotations remain editable until explicitly applied |
| 120 | +- Can be repositioned or deleted before final application |
| 121 | + |
| 122 | + |
| 123 | + |
| 124 | +### Page Redaction Tool |
| 125 | + |
| 126 | +The Page Redaction tool enables batch redaction of entire pages based on specific patterns. |
| 127 | + |
| 128 | + |
| 129 | + |
| 130 | +Function: Redacts complete pages or page ranges with a single action |
| 131 | +Options Available: |
| 132 | +- Odd Pages: Redacts only odd-numbered pages (1, 3, 5, etc.) |
| 133 | +- Even Pages: Redacts only even-numbered pages (2, 4, 6, etc.) |
| 134 | +- Specific Page: Specify single pages, ranges (e.g., 1-5, 10-15), or comma-separated lists (e.g., 1,3,5-7) |
| 135 | +- Current Page: Redacts only the currently displayed page |
| 136 | + |
| 137 | +Usage: |
| 138 | +Select desired pattern → Review affected pages in the viewer → Confirm redaction scope |
| 139 | + |
| 140 | + |
| 141 | + |
| 142 | +### Redaction Properties Tool |
| 143 | + |
| 144 | +The Redaction Properties tool allows customization of redaction appearance before application. |
| 145 | + |
| 146 | + |
| 147 | + |
| 148 | +Function: Customize the visual appearance of redaction overlays and text replacement |
| 149 | +Customizable Properties: |
| 150 | +- Fill Color: Change the redaction overlay color (default: black) |
| 151 | +- Outline Color: Set outline color for redaction boxes (optional) |
| 152 | +- Overlay Text: Add custom text to appear on redacted areas (e.g., "REDACTED", "CONFIDENTIAL") |
| 153 | +- Text Color: Change overlay text color for better visibility |
| 154 | +- Text Font: Select font family for overlay text |
| 155 | +- Text Alignment: Position overlay text within redaction boxes |
| 156 | +- Text Size: Adjust overlay text size relative to redaction area |
| 157 | + |
| 158 | + |
| 159 | + |
| 160 | +## Enabling Redaction Mode in Mobile View |
| 161 | + |
| 162 | +Step 1: Tap the Redaction button in the mobile toolbar to activate redaction mode. The redaction toolbar will appear at the bottom of the viewer. |
| 163 | + |
| 164 | + |
| 165 | + |
| 166 | +Step 2: From the redaction toolbar, select your desired redaction tool: |
| 167 | +- First Tool (Redaction Annotation): For selective content redaction |
| 168 | +- Second Tool (Page Redaction): For page-wide or pattern-based redaction |
| 169 | +- Third Tool (Redaction Properties): For appearance customization |
| 170 | + |
| 171 | +Step 3: Configure your redaction parameters using the selected tool interface. |
| 172 | + |
| 173 | +## Applying Different Redaction Types in Mobile View |
| 174 | + |
| 175 | +### Selective Content Redaction |
| 176 | +1. Select Redaction Annotation tool (first button) |
| 177 | +2. Choose Content: Tap and drag over text or draw rectangular areas |
| 178 | +3. Preview: Check redaction overlays for accuracy |
| 179 | +4. Apply: Tap "Apply Redactions" button |
| 180 | + |
| 181 | +### Page-Wide Redaction |
| 182 | +1. Select Page Redaction tool (second button) |
| 183 | +2. Choose Pattern: Select odd pages, even pages, or custom range |
| 184 | +3. Review: Verify affected pages in the viewer |
| 185 | +4. Apply: Confirm page redaction scope and apply |
| 186 | + |
| 187 | +### Custom Appearance Redaction |
| 188 | +1. Select Redaction Properties tool (third button) |
| 189 | +2. Customize: Adjust colors, overlay text, and formatting |
| 190 | +3. Preview: See changes applied to existing annotations |
| 191 | +4. Apply: Use customized appearance for final redaction |
| 192 | + |
| 193 | +## Applying Redactions in Mobile View |
| 194 | + |
| 195 | +N> Applying redactions is permanent. After applying, the underlying content and text are removed from the document and cannot be recovered. |
| 196 | + |
| 197 | +Once you have configured redactions using any combination of tools. |
| 198 | + |
| 199 | +Step 1: Review all redaction marks and configurations. |
| 200 | + |
| 201 | + |
| 202 | + |
| 203 | +Step 2: Tap the Apply Redactions button in the redaction toolbar |
| 204 | + |
| 205 | + |
| 206 | + |
| 207 | +Step 3: Confirm the action when prompted - this operation is permanent and cannot be undone |
| 208 | + |
| 209 | + |
| 210 | + |
| 211 | +The selected content will be permanently removed and replaced according to your redaction properties (solid color blocks or custom overlay text). |
| 212 | + |
| 213 | + |
| 214 | + |
| 215 | +## Removing Redaction Annotations |
| 216 | + |
| 217 | +To remove existing redaction annotations before they are applied: |
| 218 | + |
| 219 | +- Step 1: Tap the Redaction Edit button in the mobile toolbar to enter annotation editing mode |
| 220 | +- Step 2: Tap on any existing redaction annotation you wish to remove |
| 221 | +- Step 3: Select Delete from the context menu that appears |
| 222 | + |
| 223 | +Alternative: Tap redaction annotation → Use delete button in annotation properties panel |
| 224 | + |
| 225 | + |
| 226 | + |
| 227 | +N> Once redactions have been applied to the document, they become part of the PDF content and cannot be removed or modified. |
| 228 | + |
| 229 | +## See Also |
| 230 | + |
| 231 | +* [Redaction Overview](./overview) |
| 232 | +* [UI Interaction](./ui-interaction) |
| 233 | +* [Programmatic Support in Redaction](./programmatic-support) |
| 234 | +* [Toolbar](./toolbar) |
| 235 | +* [Search Text and Redact](./search-redact) |
0 commit comments