Unhead
Angular
Get Started

Installing Unhead with Angular

Copy for LLMs
On this page

The Angular adapter exposes useHead(), useSeoMeta(), and the other Unhead composables inside Angular components.

Install @unhead/angular, add provideClientHead() to your app config, and call useHead() in components. For signal-driven values, patch the returned entry from an Angular effect().

Set Up Unhead

1. Install the Package

Install the Angular-specific Unhead package:

bash
pnpm add @unhead/angular

2. Configure Client-Side Rendering

Add the client provider to your application configuration:

src/app/app.config.client.ts
import { ApplicationConfig, mergeApplicationConfig } from '@angular/core'
import { provideClientHead } from '@unhead/angular/client'
import { appConfig } from './app.config'

const clientConfig: ApplicationConfig = {
  providers: [
    provideClientHead(),
  ]
}

export const config = mergeApplicationConfig(appConfig, clientConfig)

Pass that configuration to the client bootstrap:

src/main.ts
import { bootstrapApplication } from '@angular/platform-browser'
import { AppComponent } from './app/app.component'
import { config } from './app/app.config.client'

bootstrapApplication(AppComponent, config)
  .catch(err => console.error(err))

3. Add Server-Side Rendering (Optional)

Not using Server-Side Rendering? You can skip this step. See the SPA guide for template defaults, crawler limits, and route prerendering.

For Angular Universal or other SSR setups, configure Unhead for the server:

src/app/app.config.server.ts
import { ApplicationConfig, mergeApplicationConfig } from '@angular/core'
import { provideServerRendering } from '@angular/platform-server'
import { provideServerRoutesConfig } from '@angular/ssr'
import { provideServerHead } from '@unhead/angular/server'
import { appConfig } from './app.config'
import { serverRoutes } from './app.routes.server'

const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering(),
    provideServerRoutesConfig(serverRoutes),
    provideServerHead({
      // Optional initial default values
      init: [
        {
          htmlAttrs: {
            lang: 'en',
          },
          title: 'Default Title',
          meta: [
            { name: 'description', content: 'Default description' }
          ]
        }
      ]
    }),
  ]
}

export const config = mergeApplicationConfig(appConfig, serverConfig)

Pass the server configuration to its bootstrap:

src/main.server.ts
import { bootstrapApplication } from '@angular/platform-browser'
import { AppComponent } from './app/app.component'
import { config } from './app/app.config.server'

const bootstrap = () => bootstrapApplication(AppComponent, config)

export default bootstrap

4. Add Head Tags in Components

Call the composables in your Angular components:

src/app/app.component.ts
import { Component } from '@angular/core'
import { RouterOutlet } from '@angular/router'
import { useHead, useSeoMeta } from '@unhead/angular'

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  template: `
    <h1>{{ pageTitle }}</h1>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {
  pageTitle = 'My Angular App'

  constructor() {
    // Basic head management
    useHead({
      title: 'My Angular App',
      meta: [
        { name: 'description', content: 'An Angular app using Unhead' }
      ],
      link: [
        { rel: 'icon', href: '/favicon.ico' }
      ]
    })

    // Dedicated SEO meta tags helper
    useSeoMeta({
      description: 'An Angular app using Unhead for SEO'
    })
  }
}

Reactive Head Tags

For signal-driven tags, create one entry and patch it from an Angular effect:

src/app/counter.component.ts
import { Component, effect, signal } from '@angular/core'
import { useHead } from '@unhead/angular'

@Component({
  selector: 'app-counter',
  template: `
    <button (click)="incrementCounter()">Count: {{ counter() }}</button>
  `
})
export class CounterComponent {
  counter = signal(0)
  head = useHead()

  constructor() {
    effect(() => {
      this.head.patch({
        title: `Counter: ${this.counter()}`
      })
    })
  }

  incrementCounter() {
    this.counter.update(value => value + 1)
  }
}

The Angular Reactivity Guide covers cleanup, computed values, and several signals in one entry.

Server Defaults

provideServerHead() inserts these tags by default:

  • <html lang="en">
  • <meta charset="utf-8">
  • <meta name="viewport" content="width=device-width, initial-scale=1">

Customize these defaults through the init option in the server configuration shown above. The client provider does not add them, so include them in your HTML template when you are building a client-only app.

Next Steps

Available composables:

Related guides:

Edit this page
Markdown For LLMs
Did this page help you?

Upgrade Guide

Learn how to migrate between Unhead versions for Angular users.