---
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)                                       |
| `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 } },
  },
}
```

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 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: `
    <form (submit)="$event.preventDefault()">
      <input type="search" placeholder="Search" (input)="search.search({ text: $any($event.target).value })" />
      @if (search.hitCount() > 0) {
        <span>{{ search.activeHitIndex() + 1 }} of {{ search.hitCount() }}</span>
      }
      <button type="button" (click)="search.nextHit()">Next</button>
    </form>
  `,
})
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.