Core Concepts

Head Management in Angular Components

On this page

Call useHead() in an Angular component. The adapter does not provide declarative <unhead-title>, <unhead-meta>, <unhead-link>, or <unhead-script> elements.

Component Usage

import { Component } from '@angular/core'
import { useHead } from '@unhead/angular'

@Component({
  selector: 'app-my-page',
  standalone: true,
  template: `
    <h1>Example Site</h1>
  `,
})
export class MyPageComponent {
  head = useHead({
    title: 'Example Site',
    meta: [
      { name: 'description', content: 'An example page description.' }
    ]
  })
}

The entry is disposed automatically when Angular destroys the component. For signal-driven values, create the entry once and call head.patch() from an Angular effect().

Edit this page

Markdown For LLMs

Did this page help you?

Reactivity in Angular

Use Angular signals with useHead() for reactive head tags. Track signals in effect() and update the entry with patch().

Install Unhead Schema.org

Add Schema.org structured data to Angular apps with @unhead/schema-org and the Angular Unhead provider.