Component Inputs & Outputs

For custom host sizing, see Viewport fitting for fitPadding, maxFitScale, framework-specific examples, and default values.

PowerPointViewerComponent (selector pptx-viewer) exposes its configuration through signal-based input()s and events through output()s. Only content is meaningful for a read-only viewer; everything else is optional. This reference is taken directly from the source component.

import { PowerPointViewerComponent } from 'pptx-angular-viewer';

TIP

Angular has no forwardRef handle: PowerPointViewerComponent's public methods (navigation, undo/redo, zoom, getContent(), ...) live directly on the component instance, reachable via a template reference variable or viewChild(). See Public API.

Content

Input	Type	Default	Description
content	Uint8Array | ArrayBuffer | null	null	Raw .pptx file bytes. Accepts either typed array or ArrayBuffer directly - no manual wrapping.
filePath	string | undefined	-	Original file path or name. Keys autosave recovery in IndexedDB and shows in the title bar.
fileName	string | undefined	-	Display name shown in the title bar next to the save-location status. Falls back to a localised "Presentation".

Autosave recovery requires filePath

The viewer's built-in autosave timer periodically serializes the document to IndexedDB keyed by filePath. Without a stable filePath across reloads, recovery has no key to look up.

Autosave

Input	Type	Default	Description
autosave	boolean | undefined	true	Recovery autosave. A policy ceiling over the title-bar toggle; see below.
autosaveIntervalMs	number | undefined	File > Options cadence	Recovery cadence. An explicit value outranks the user's AutoRecover setting.

The rule is the same in all five bindings and lives in one shared decision function, resolveAutosaveActivation:

The autosave input is a policy ceiling. The title-bar AutoSave toggle is the user's preference inside it.

autosave	What runs	The toggle
omitted	Autosave runs; the user's toggle decides, defaulting to on.	Works.
true	Same as omitted: the host permits it, the user decides.	Works.
false	Autosave is off, and no recovery prompt is offered on load.	Inert (it must not move).

A preference can never exceed a policy, which is why autosave="false" also takes the switch away. canEdit and a filePath key remain hard requirements either way, and an explicit autosaveIntervalMs outranks the user's File > Options > Save > "Save AutoRecover information every N minutes" cadence (two minutes by default).

When a deck finishes loading and a snapshot newer than 24 hours exists for the same filePath, the viewer raises a "Recover unsaved changes?" dialog offering Restore or Discard.

Editing

Input	Type	Default	Description
canEdit	boolean	false	Enables editing actions (ribbon editing tools, inspector edits, inline text editing, slide management). false is read-only.

Display

These four match the Svelte and vanilla bindings; the defaults and clamping are shared.

Prop	Type	Default	Description
[initialSlide]	number	0	Zero-based slide shown after each load, clamped into the deck. Changing it later applies to the next load, not the current slide.
[showToolbar]	boolean	true	Show the editor chrome: title bar, ribbon and toolbar, protected-view and read-only banners, the mobile toolbar and the status bar. false leaves the canvas (and the thumbnail pane, if shown).
[showThumbnails]	boolean	true	Show the slide thumbnail pane. It still follows the user's own collapse toggle and the slidesPane customisation panel.
[showCompatibilityToasts]	boolean	true	Show the compatibility warning toast stack after a load. false hides the stack only; the warnings are still collected. Independent of showToolbar.

<pptx-viewer [content]="bytes" [initialSlide]="2" [showToolbar]="false" [showThumbnails]="false" />

Events (@Output()s)

Output	Payload	Description
dirtyChange	boolean	Fires when the unsaved-changes flag toggles.
contentChange	Uint8Array	Fires with the re-serialized document bytes whenever getContent() materialises the deck.
activeSlideChange	number	Fires when the active slide changes.
modeChange	string	Fires when the viewer mode changes: 'preview', 'edit', 'present', or 'master'.
zoomChange	number	Fires when the zoom level changes.
selectionChange	string[]	Fires when element selection changes.
slideCountChange	number	Fires when the total slide count changes (slide added/deleted).
propertiesChange	Partial<PptxCoreProperties>	Fires when the user edits document properties (title, author, ...) in the Info dialog.
startCollaboration	CollaborationConfig	Fires when a session starts from the Share/Broadcast dialog. Set the collaboration input in response.
stopCollaboration	void	Fires when the session stops from the Share/Broadcast dialog. Clear the collaboration input in response.

INFO

contentChange delivers a Uint8Array, not a boolean. To pull content on demand instead, call getContent() on the component instance.

Presentation / authoring

Input	Type	Default	Description
authorName	string | undefined	-	Display name used as the author for comments/annotations and as the broadcast owner's name. Falls back to collaboration.userName or 'You'/'Presenter'.
class	string	''	Optional class name applied to the viewer's root element.
smartArt3D	boolean	false	Opt in to the Three.js SmartArt renderer (extruded 3D blocks on WebGL). Requires the optional three peer; falls back to SVG without it.
surfaceChart3D, barChart3D, lineChart3D, areaChart3D, pieChart3D	boolean	false	Independently opt in to interactive Three.js renderers for the matching 3D chart kinds. Each falls back to SVG when three is unavailable or the chart cannot render as a WebGL scene.
ai	PptxAiConfig	-	Enables the optional AI assistant. Its SDK peer loads only when the panel is opened; omit this input to leave the assistant unavailable.
onOpenFile	(() => void) | undefined	-	Host override for the File ▸ Open action: bypasses the built-in native file picker; the host then supplies a new content value instead.

Theming

Input	Type	Default	Description
theme	ViewerTheme | undefined	-	Theme configuration: partial color overrides, a custom radius, and arbitrary cssVars. Unset values fall back to the built-in dark theme. See Theming.

<pptx-viewer
  [content]="bytes"
  [theme]="{ colors: { primary: '#6366f1', background: '#0f172a' }, radius: '0.75rem' }"
/>

UI customization

Input	Type	Default	Description
[customization]	ViewerCustomization	-	Hide, lock or remap any part of the chrome: ribbon tabs and buttons, File > Options pages, sections and settings (lock a value, set a default), File tab pages and cards, context-menu entries, editor shortcuts, panels, features (AI, collaboration) and dialogs. Unioned with hiddenActions. A new object replaces the whole customisation.

<pptx-viewer [content]="bytes" [canEdit]="true" [customization]="customization" />

The same helpers (hideRibbonTab, lockSetting, remapShortcut, ...) are available on the component instance to change it at runtime; see the API page. Every id, the rules and recipes are in the UI Customization guide.

Collaboration

These inputs enable and control real-time co-editing. See Collaboration for the full flow and the CollaborationConfig shape.

Input	Type	Default	Description
collaboration	CollaborationConfig | undefined	-	When provided, enables collaborative editing with live cursors, presence, and Yjs CRDT sync. Requires the yjs peer plus y-websocket or y-webrtc.
shareDefaults	{ roomId?: string; userName?: string; serverUrl?: string } | undefined	-	Default values for the Share/Broadcast dialog fields. If omitted, the fields start empty (userName falls back to authorName).

INFO

collaboration is controlled, same as React/Vue. The viewer does not start a session on its own - listen for startCollaboration to set the input, and stopCollaboration to clear it.

Full input/output list

class PowerPointViewerComponent {
	// Inputs
	readonly content = input<Uint8Array | ArrayBuffer | null>(null);
	readonly canEdit = input<boolean>(false);
	readonly initialSlide = input<number | undefined>(undefined);
	readonly showToolbar = input<boolean | undefined>(undefined);
	readonly showThumbnails = input<boolean | undefined>(undefined);
	readonly showCompatibilityToasts = input<boolean | undefined>(undefined);
	readonly class = input<string>('');
	readonly theme = input<ViewerTheme | undefined>(undefined);
	readonly filePath = input<string | undefined>(undefined);
	readonly fileName = input<string | undefined>(undefined);
	readonly collaboration = input<CollaborationConfig | undefined>(undefined);
	readonly authorName = input<string>();
	readonly shareDefaults = input<
		{ roomId?: string; userName?: string; serverUrl?: string } | undefined
	>(undefined);
	readonly onOpenFile = input<(() => void) | undefined>(undefined);
	readonly smartArt3D = input<boolean>(false);
	readonly surfaceChart3D = input<boolean>(false);
	readonly barChart3D = input<boolean>(false);
	readonly lineChart3D = input<boolean>(false);
	readonly areaChart3D = input<boolean>(false);
	readonly pieChart3D = input<boolean>(false);
	readonly ai = input<PptxAiConfig | undefined>(undefined);

	// Outputs
	readonly activeSlideChange = output<number>();
	readonly dirtyChange = output<boolean>();
	readonly contentChange = output<Uint8Array>();
	readonly propertiesChange = output<Partial<PptxCoreProperties>>();
	readonly modeChange = output<string>();
	readonly zoomChange = output<number>();
	readonly selectionChange = output<string[]>();
	readonly slideCountChange = output<number>();
	readonly startCollaboration = output<CollaborationConfig>();
	readonly stopCollaboration = output<void>();
}

Notes on triggering features

Navigation, mode-switching, zoom, undo/redo, and selection are available through the public API (viewer.goNext(), viewer.setMode('present'), etc.). Export and print are driven through the built-in ribbon/dialogs. See Export for details on document export.