Elements

All thirteen elements are standalone components exported from @ngpdf/core. Import them all at once with PDF_ELEMENTS, or one by one by class name. PDF_ELEMENTS also holds the pdfPerSheet directive (PdfPerSheet), which renders a template once per sheet inside a fixed view: see Content that changes per sheet.

import { PDF_ELEMENTS } from '@ngpdf/core';

@Component({
  selector: 'app-report',
  imports: [PDF_ELEMENTS],
  template: `…`,
})
export class Report {}

Every element also takes a style attribute and [style.*] bindings. See Style properties.

pdf-view, pdf-text, pdf-image, pdf-svg, pdf-table, pdf-row and pdf-cell also take these two inputs:

See Links to a place in the document and Bookmarks.

#pdf-document

The root of a document. It holds pdf-page elements and the PDF's metadata.

Only its pdf-page children are rendered. Its text styles are inherited by every page. See Documents and pages.

#pdf-page

A page template. Its content continues on as many sheets as it needs, all of the same size, or each as tall as its content when the height is auto.

PageSize and PageOrientation are exported types. Padding on the page is the margin of every sheet; background and border are drawn on every sheet. width, height and margin are ignored.

#pdf-view

A flex container, like a div with display: flex; flex-direction: column.

In pagination, a column pdf-view with children is a wrapper whose children are units, and a row pdf-view is one unit that splits between its children's lines only when it is taller than a page. See Pagination.

#pdf-text

A block of text. Its content is the text of all its child nodes.

It wraps at Unicode line-break opportunities, and a long text breaks between lines across sheets (see Text across pages). Style part of its text with pdf-span. A nested pdf-text is drawn in the outer text's style, with a warning in development mode. See Text and fonts.

#pdf-span

Part of a pdf-text drawn in its own text styles, such as one bold word in a sentence. It has no inputs.

<pdf-text>Total due: <pdf-span style="font-weight: bold">{{ total() }}</pdf-span></pdf-text>

It holds text and other pdf-span elements, and must be inside a pdf-text: anywhere else the render fails with ngpdf: pdf-span must be inside a pdf-text. Only color, font-family, font-size, font-weight, font-style, text-decoration, letter-spacing, text-transform, hyphens and vertical-align apply to it. See Styled runs.

#pdf-link

A link to a URL. Where a pdf-view can go it is a column pdf-view whose box is clickable; inside a pdf-text it is inline, like a pdf-span, and the text it covers is clickable.

<pdf-text>Pay at <pdf-link [href]="payUrl" style="color: #1a56db; text-decoration: underline">example.com/pay</pdf-link>.</pdf-text>

A link has no default color or underline. Inline, only the text styles of a pdf-span apply to it. A pdf-link inside another pdf-link fails the render with ngpdf: pdf-link inside a pdf-link. See Links.

#pdf-note

A comment on the page, like a sticky note in a PDF viewer: the viewer shows an icon, and clicking it opens a popup with the note's text. Put it where a pdf-view can go. Its content is the note's text.

<pdf-note author="Ana" icon="help">Is this total before or after tax?</pdf-note>
<pdf-text>Total: {{ total() }}</pdf-text>

A note takes no space in the layout. Its icon sits at the left edge of its parent's content box, at the top of the next element, or at the bottom of the element before it when it is the last child. With position: absolute and top, right, bottom or left it can go anywhere on its containing block, for example next to a paragraph's top right corner. The annotation is 20pt square, kept inside the sheet; viewers draw the icon at their own size.

The icon color is the note's own color, sticky-note yellow (#ffd400) by default; it does not inherit the text color around it. Only display, color, position, top, right, bottom and left apply to a note. Any other property is ignored without being read, so a transform doesn't move the note and an invalid value doesn't fail the render, and it warns in development mode.

The text is plain: text nodes only, with whitespace collapsed as in a pdf-text. Any character works, including those the standard fonts can't draw, because the viewer shows it, not ngpdf. An element inside a note fails the render with ngpdf: pdf-note takes text only, and a note anywhere inside a pdf-text, even inside a pdf-view in it, with ngpdf: pdf-note inside a pdf-text.

A note is never printed, as viewers expect from review comments, and it has no action. Where its icon overlaps a link, for example a note just before a pdf-link, the link takes the click there: the note opens from the rest of its icon or from the viewer's comments panel. In pagination it goes on the sheet of the content after it, or of the content before it when it is the last child, so a note in the flow never adds a sheet of its own. See Notes.

NoteIcon is an exported type.

#pdf-image

A PNG or JPEG image.

Sizing follows the aspect ratio unless you set both width and height; then object-fit (contain or cover) places the image. See Images.

#pdf-svg

An SVG drawing, drawn as vector shapes, where a pdf-image can go.

Sizing follows the SVG's natural size: the root's width and height, with a missing one taken from the viewBox ratio. With both width and height set on the element, the SVG's preserveAspectRatio places the drawing. Its color is what currentColor means in the SVG. See SVG.

#pdf-table

A table with declared columns.

TableColumn is an exported type:

type TableColumn = number | `${number}fr` | `${number}%` | 'auto';

Each row of the table is a pagination unit. See Tables.

#pdf-row

A table row. Its cells are laid out on the table's columns.

Inside a table, horizontal padding, left and right borders, margins and justify-content on a row are ignored. Outside a table, a pdf-row is a flex container whose default direction is row.

#pdf-cell

A table cell.

The cell's width comes from its columns. Margins, min-width and max-width on a cell inside a table are ignored.

#pdf-page-number

The sheet number. As a direct child of pdf-page, it sits at the bottom of the content area of every sheet; anywhere else, it is laid out where it is and shows the number of the sheet it is drawn on.

As a direct child of pdf-page, it is right-aligned unless it or an ancestor sets text-align, and it reserves one line of height on every sheet. Elsewhere, for example in a fixed header, its box is measured with three-digit numbers and the text is aligned in it by text-align. Content inside it is ignored. See Pagination.

#pdf-canvas

A box drawn by a function, where a pdf-view can go.

It has no content, so its size comes from width and height, or from flex. The drawing is clipped to the content box. See Lines and shapes.