Get Started

Installing Unhead with Angular

On this page

How Do I Set Up Unhead in Angular?
How Do I Make Head Tags Reactive?
What Default Tags Does Unhead Add?
Next Steps

Unhead provides first-class support for Angular, allowing you to manage your head tags using composables like useHead(), useSeoMeta(), and others within your Angular components.

Quick Start: Install @unhead/angular, add provideClientHead() to your app config, and use useHead() in components.

StackBlitz - Unhead - Angular

How Do I Set Up Unhead in Angular?

1. Install the Package

Install the Angular-specific Unhead package:

bash

pnpm add @unhead/angular

2. How Do I 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)

Then use this configuration in your main client-side bootstrap file:

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. How Do I Add Server-Side Rendering? (Optional)

Not using Server-Side Rendering? You can skip this step.

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)

Then use this configuration in your server bootstrap file:

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. How Do I Use Unhead in Components?

Use Unhead's composables in your Angular components:

src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  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'
    })
  }
}

How Do I Make Head Tags Reactive?

Unhead works with Angular's signals for reactive head content:

src/app/counter.component.ts

import { Component, 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() {
    useHead({
      title: () => `Counter: ${this.counter()}`
    })
  }

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