Components
Blocks
- Event Agenda
- Event Ticket
- Gift Certificate
- Invoice Classic
- Invoice Consultant
- Invoice Corporate
- Invoice Creative
- Invoice Minimal
- Invoice Modern
- Lesson Plan
- Medical Intake Form
- Meeting Minutes
- Packing Slip
- Press Release
- Report Financial
- Report Marketing
- Report Operations
- Report Security
- Shipping Label
- Work Order
Rendering PDF…
Installation
$ pnpm dlx shadcn@latest add @angular-pdfcn/forme/page-headerUsage
import { Component } from "@angular/core";
import { PdfPageHeader } from "@/components/pdf/page-header/page-header";
import { PdfText } from "@/components/pdf/text/text";
import {
FormeDocument,
FormePage,
FormeView,
} from "@/lib/pdf-primitives";
@Component({
imports: [FormeDocument, FormePage, FormeView, PdfPageHeader, PdfText],
template: `
<forme-document>
<forme-page [size]="{ height: 240, width: 595 }" [margin]="30">
<forme-view>
<pdf-page-header
title="Invoice #1042"
subtitle="Acme Corp"
rightText="March 2026"
rightSubText="Due: 2026-03-31"
variant="simple"
/>
<pdf-text [style]="textStyle"
>Prepared for Northwind Industries</pdf-text
>
<pdf-text [style]="textStyle"
>This document demonstrates the simple page header
variant.</pdf-text
>
</forme-view>
</forme-page>
</forme-document>
`,
})
export class PageHeaderDemo {
protected readonly textStyle = {
color: "#555555",
fontSize: 10,
lineHeight: 1.6,
marginBottom: 6,
};
}API Reference
PdfPageHeader
| Input | Type | Default |
|---|---|---|
title |
string |
- |
subtitle |
string |
- |
rightText |
string |
- |
rightSubText |
string |
- |
variant |
'simple' | 'centered' | 'minimal' | 'branded' | 'logo-left' | 'logo-right' | 'two-column' |
'simple' |
background |
string |
- |
titleColor |
string |
- |
marginBottom |
number |
- |
address |
string |
- |
phone |
string |
- |
email |
string |
- |
logo |
TemplateRef<unknown> |
- |
fixed |
boolean |
false |
noWrap |
boolean |
true |