Preview Actions
The toolbar overlaid on a document preview — a converter dropdown, zoom controls, search-in-document, and a highlights popover — plus a slot for app-specific actions.
<preview-actions> is the floating toolbar <preview-content> overlays on its iframe: a converter dropdown,
zoom fit/in/out, a search-in-document popover, and a highlights popover — everything a zoomable, searchable
PreviewService needs, collapsed behind a <floating-toolbar> trigger.
Minimal example
import { Component, signal } from "@angular/core";
import { PreviewActionsComponent } from "@sinequa/atomic-angular";
import type { CConverter } from "@sinequa/atomic-angular";
import type { PreviewData } from "@sinequa/atomic";
@Component({
selector: "custom-preview",
imports: [PreviewActionsComponent],
template: `
<preview-actions
[previewData]="previewData()"
[activeConversion]="activeConversion()"
(onConversionSelect)="activeConversion.set($event)"
/>
`,
})
export class CustomPreviewComponent {
protected readonly previewData = signal<PreviewData | undefined>(undefined);
protected readonly activeConversion = signal<CConverter | undefined>(undefined);
}Every action here reads previewData and calls straight into the injected PreviewService — nothing about
zoom or highlights needs wiring beyond passing the loaded data in. <preview-content> already does this for
you; use <preview-actions> directly only when building a preview surface of your own.
Recipes
Add an app-specific action
The built-in actions (converter, zoom, search, highlights) are generic to any preview — anything app-specific,
like an AI-description toggle, is projected into the extra-actions slot instead of being hard-coded here.
import { Component, signal } from "@angular/core";
import { PreviewActionsComponent } from "@sinequa/atomic-angular";
import type { PreviewData } from "@sinequa/atomic";
@Component({
selector: "preview-with-ai-toggle",
imports: [PreviewActionsComponent],
template: `
<preview-actions [previewData]="previewData()">
@if (hasAIDescription()) {
<ng-container slot="extra-actions">
<button variant="tertiary" [iconOnly]="true" size="sm" (click)="toggleAIDescription()">AI</button>
</ng-container>
}
</preview-actions>
`,
})
export class PreviewWithAiToggleComponent {
protected readonly previewData = signal<PreviewData | undefined>(undefined);
protected readonly hasAIDescription = signal(false);
protected toggleAIDescription(): void {
/* … */
}
}Options
Prop
Type
This component has one output, onConversionSelect (OutputEmitterRef<CConverter | undefined>), forwarding
the converter dropdown's pick.
Pitfalls
What's next
Preview Content
Render a document's converted preview in an iframe — with zoom, search-in-document, highlights, an AI-description toggle, and a Markdown fallback — from a single drop-in component.
Preview Header
A collapsible metadata panel for a document preview — you provide the rows, the component owns only the collapsible shell and their two-column (key | value) layout.