---
title: "Plugins — Angular"
description: "Every feature of the viewer is a headless plugin. Set any plugin's settings, change them while the viewer runs, use their hooks in your components, and add a plugin of your own."
integration: "Angular"
source: "https://www.embedpdf.com/docs/viewer/angular/code/plugins"
---
# Plugins
The viewer is the [headless](https://www.embedpdf.com/docs/headless/angular) plugins with an interface built on top. Every feature
is a plugin: search is the search plugin, the comments panel uses the annotation plugin's comments.
So everything the headless docs say about a plugin is true inside the viewer, with the same names:
- its **settings** go in `plugins`, under its name;
- its **API** is `viewer.get(name)`;
- its **hooks** work in your own components inside the viewer.
## Every plugin
| Name | What it does | Headless page |
| :------------ | :------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------ |
| `stage` | Scrolling, zoom, page layout and navigation | [Scroll, zoom & layout](https://www.embedpdf.com/docs/headless/angular/viewing/stage) |
| `thumbnails` | The thumbnails panel: a second `stage` over the same document | [Two views of one document](https://www.embedpdf.com/docs/headless/angular/viewing/stage#two-views-of-one-document) |
| `render` | Sharp pages at every zoom | [Rendering](https://www.embedpdf.com/docs/headless/angular/viewing/render) |
| `link` | Links to pages and websites | [Links](https://www.embedpdf.com/docs/headless/angular/viewing/links) |
| `selection` | Selecting and copying text | [Selecting & copying](https://www.embedpdf.com/docs/headless/angular/text/selection) |
| `search` | Finding text | [Search](https://www.embedpdf.com/docs/headless/angular/text/search) |
| `annotation` | Annotations, their tools, and comments | [Annotations](https://www.embedpdf.com/docs/headless/angular/annotations) |
| `stamp` | Stamp libraries | [Stamps](https://www.embedpdf.com/docs/headless/angular/annotations/stamps) |
| `measurement` | Measuring at a drawing's scale | [Measurements](https://www.embedpdf.com/docs/headless/angular/annotations/measurements) |
| `redaction` | Removing content for good | [Redaction](https://www.embedpdf.com/docs/headless/angular/annotations/redaction) |
| `form` | Filling and building forms | [Filling forms](https://www.embedpdf.com/docs/headless/angular/forms) |
| `signature` | Signing and checking signatures | [Signatures](https://www.embedpdf.com/docs/headless/angular/forms/signatures) |
| `pageEdit` | Rotating, moving, inserting and deleting pages | [Organizing pages](https://www.embedpdf.com/docs/headless/angular/documents/pages) |
| `metadata` | A document's title, author and your own fields | [Metadata](https://www.embedpdf.com/docs/headless/angular/documents/metadata) |
| `fonts` | The fonts a document can be written in, and drawing its text in a browser | [Fonts](https://www.embedpdf.com/docs/headless/angular/documents/fonts) |
| `outline` | The outline (bookmarks): following, adding, renaming, moving and deleting items | [Outline](https://www.embedpdf.com/docs/headless/angular/documents/outline) |
| `attachment` | The files inside the PDF: listing, saving, attaching and removing them | [Attachments](https://www.embedpdf.com/docs/headless/angular/documents/attachments) |
| `actions` | What a PDF does by itself: buttons, scripts, printing | [Actions & scripts](https://www.embedpdf.com/docs/headless/angular/documents/actions) |
| `documents` | Opening, closing, tabs and saving | [Opening documents](https://www.embedpdf.com/docs/headless/angular/documents/opening) |
| `interaction` | The active tool, cursors and touch | [Tools, cursors & touch](https://www.embedpdf.com/docs/headless/angular/ui/tools) |
| `commands` | Every button's action, and shortcuts | [Commands & shortcuts](https://www.embedpdf.com/docs/headless/angular/ui/commands) |
| `shell` | Which panels and menus are open | [Panels & dialogs](https://www.embedpdf.com/docs/headless/angular/ui/panels) |
| `i18n` | The language | [Translations](https://www.embedpdf.com/docs/headless/angular/ui/translations) |
## Settings
`plugins` takes each plugin's settings by its name, exactly as its page lists them under
**Settings**:
```js
{
plugins: {
stage: { spread: 'odd', zoom: { mode: 'fit-width' } },
selection: { color: 'rgb(124 58 237 / 0.3)' },
actions: { javascript: { enabled: false } },
},
}
```
**`settings.ts`**
```typescript
import { Component } from '@angular/core';
import { EpdfPdfViewer, type ViewerConfig } from '@embedpdf/viewer-angular';
const links = '/pdfs/links.pdf';
@Component({
selector: 'demo-root',
imports: [EpdfPdfViewer],
template: ``,
})
export class App {
readonly links = links;
readonly config: ViewerConfig = {
plugins: {
stage: { spread: 'odd', zoom: { mode: 'fit-width' } },
selection: { color: 'rgb(124 58 237 / 0.3)' },
},
};
}
```
> **Try it:** the brand guidelines open two pages at a time, at the width of the frame. Select some
> text: the selection is purple.
Change them while the viewer runs, and go back to what you set:
```js
viewer.get('stage').updateSettings({ layout: 'horizontal' });
viewer.get('stage').resetSettings();
```
A change reaches every document, open or opened later, except for `stage` and `thumbnails`: their
settings are each document's own view of it. Changed from code, they change the active document,
or the one you name with `viewer.forDocument(id)`, and a document that opens later starts from
what `plugins` says.
A few plugins take settings that only the viewer has, such as the standard stamps of
`plugins.stamp`. The feature pages list them: [Annotations](../features/annotations),
[Forms & signatures](../features/forms-and-signatures).
## In your components
Your own components inside the viewer can use every headless hook. Install the headless adapter
for your framework next to the viewer (`@embedpdf/react`, `@embedpdf/vue`, `@embedpdf/svelte` or
`@embedpdf/angular`, the same version), and use its hooks as the headless docs show them:
**`hooks.ts`**
```typescript
import { Component, inject } from '@angular/core';
import { EpdfSearch } from '@embedpdf/angular/search';
// A search box of your own, in the viewer's header. The service is the headless one.
@Component({
selector: 'app-header-search',
template: `
`,
})
export class HeaderSearch {
protected readonly search = inject(EpdfSearch);
}
```
Put `HeaderSearch` in the viewer's `header` [region](../customize/components#above-below-and-when-nothing-is-open),
and it searches the open document. The hooks find the viewer they're in, and the document that's
active, by themselves.
## A plugin of your own
A plugin you wrote for headless works in the viewer too. Give it a name in `plugins`:
```js
import { analyticsPlugin } from './analytics-plugin';
export const config = {
plugins: {
analytics: analyticsPlugin({ endpoint: '/api/events' }),
},
};
```
`viewer.get('analytics')` is then its API, its commands can go in the [layout](../customize/layout),
and your components can use its hooks. See [How it works](https://www.embedpdf.com/docs/headless/angular/concepts/how-it-works#plugins)
in the headless docs for writing one.
## When to build your own interface
The viewer lets you move, add and replace everything around the pages. Go [headless](https://www.embedpdf.com/docs/headless/angular)
when you need to change what it doesn't open up:
- the look of its own buttons, menus and panels beyond [theming](../customize/theming);
- an arrangement that isn't bars, panels and regions;
- what's drawn on the pages themselves, such as annotations drawn your own way.
Everything on this page carries over: the same plugins, settings, names and hooks.