Installing Unhead with Angular · Unhead

[Unhead Home](https://unhead.unjs.io/ "Home")

- [Docs](https://unhead.unjs.io/docs/angular/head/guides/get-started/overview)
- [Tools](https://unhead.unjs.io/tools)
- [Learn](https://unhead.unjs.io/learn/guides/what-is-capo)

[Releases](https://unhead.unjs.io/releases)

Search…```k`` /`

[Unhead on GitHub](https://github.com/unjs/unhead)

[User Guides](https://unhead.unjs.io/docs/angular/head/guides/get-started/overview)

[API](https://unhead.unjs.io/docs/angular/head/api/get-started/overview)

Angular

- [Switch to Angular](https://unhead.unjs.io/docs/angular/head/guides/get-started/installation)
- [Switch to TypeScript](https://unhead.unjs.io/docs/typescript/head/guides/get-started/installation)
- [Switch to Vue](https://unhead.unjs.io/docs/vue/head/guides/get-started/installation)
- [Switch to React](https://unhead.unjs.io/docs/react/head/guides/get-started/installation)
- [Switch to Svelte](https://unhead.unjs.io/docs/svelte/head/guides/get-started/installation)
- [Switch to Solid.js](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/installation)
- [Switch to Nuxt](https://unhead.unjs.io/docs/nuxt/head/guides/get-started/installation)

v3 (beta)

You're viewing **Unhead v3 beta** documentation.

Head

- [Discord Support](https://discord.com/invite/275MBUBvgP)
- [Angular Playground](https://stackblitz.com/edit/stackblitz-starters-e4x42yaz)

- Get Started
  - [Overview](https://unhead.unjs.io/docs/angular/head/guides/get-started/overview)
  - [Introduction to Unhead](https://unhead.unjs.io/docs/angular/head/guides/get-started/intro-to-unhead)
  - [Starter Recipes](https://unhead.unjs.io/docs/angular/head/guides/get-started/starter-recipes)
  - [Installation](https://unhead.unjs.io/docs/angular/head/guides/get-started/installation)
  - [Upgrade Guide](https://unhead.unjs.io/docs/angular/head/guides/get-started/migration)
- Core Concepts
  - [Titles & Title Templates](https://unhead.unjs.io/docs/angular/head/guides/core-concepts/titles)
  - [Tag Sorting & Placement](https://unhead.unjs.io/docs/angular/head/guides/core-concepts/positions)
  - [Class & Style Attributes](https://unhead.unjs.io/docs/angular/head/guides/core-concepts/class-attr)
  - [Inline Style & Scripts](https://unhead.unjs.io/docs/angular/head/guides/core-concepts/inner-content)
  - [Tag Deduplication](https://unhead.unjs.io/docs/angular/head/guides/core-concepts/handling-duplicates)
  - [DOM Event Handling](https://unhead.unjs.io/docs/angular/head/guides/core-concepts/dom-event-handling)
  - [Script Loading](https://unhead.unjs.io/docs/angular/head/guides/core-concepts/loading-scripts)
  - [Reactivity](https://unhead.unjs.io/docs/angular/head/guides/core-concepts/reactivity)
  - [Head Component](https://unhead.unjs.io/docs/angular/head/guides/core-concepts/components)
- Build Plugins
  - [Overview](https://unhead.unjs.io/docs/angular/head/guides/build-plugins/overview)
  - [Tree-Shaking](https://unhead.unjs.io/docs/angular/head/guides/build-plugins/tree-shaking)
  - [useSeoMeta Transform](https://unhead.unjs.io/docs/angular/head/guides/build-plugins/seo-meta-transform)
  - [Minify Transform](https://unhead.unjs.io/docs/angular/head/guides/build-plugins/minify-transform)
  - [Devtools](https://unhead.unjs.io/docs/angular/head/guides/build-plugins/devtools)
- Plugins
  - [Template Params](https://unhead.unjs.io/docs/angular/head/guides/plugins/template-params)
  - [Alias Sorting](https://unhead.unjs.io/docs/angular/head/guides/plugins/alias-sorting)
  - [Canonical Plugin](https://unhead.unjs.io/docs/angular/head/guides/plugins/canonical)
  - [Infer SEO Meta](https://unhead.unjs.io/docs/angular/head/guides/plugins/infer-seo-meta-tags)
  - [Minify](https://unhead.unjs.io/docs/angular/head/guides/plugins/minify)
  - [Validate](https://unhead.unjs.io/docs/angular/head/guides/plugins/validate)

Get Started

# Installing Unhead with Angular

[Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/0.angular/head/guides/0.get-started/1.installation.md)

Last updated Apr 5, 2026 by [Harlan Wilton](https://github.com/harlan-zw) in [docs: documentation content audit and formatting improvements (#718)](https://github.com/unjs/unhead/pull/718).

On this page

- [How Do I Set Up Unhead in Angular?](#how-do-i-set-up-unhead-in-angular)
- [How Do I Make Head Tags Reactive?](#how-do-i-make-head-tags-reactive)
- [What Default Tags Does Unhead Add?](#what-default-tags-does-unhead-add)
- [Next Steps](#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](https://stackblitz.com/edit/stackblitz-starters-e4x42yaz)

## [How Do I Set Up Unhead in Angular?](#how-do-i-set-up-unhead-in-angular)

### [1. Install the Package](#_1-install-the-package)

Install the Angular-specific Unhead package:

pnpm

bun

npm

yarn

bash

`pnpm add @unhead/angular`

### [2. How Do I Configure Client-Side Rendering?](#_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)](#_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?](#_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?](#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)
  }
}
```

For more details on reactivity, check the [Angular Reactivity Guide](https://unhead.unjs.io/docs/angular/head/guides/core-concepts/reactivity).

## [What Default Tags Does Unhead Add?](#what-default-tags-does-unhead-add)

Unhead automatically inserts these essential tags:

- `<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.

## [Next Steps](#next-steps)

Your Angular app is now ready for head management.

Explore the available composables:

- [`useHead()`](https://unhead.unjs.io/docs/head/api/composables/use-head)
- [`useSeoMeta()`](https://unhead.unjs.io/docs/head/api/composables/use-seo-meta)
- [`useScript()`](https://unhead.unjs.io/docs/head/api/composables/use-script)

Or explore additional functionality:

- Learn about [reactivity](https://unhead.unjs.io/docs/angular/head/guides/core-concepts/reactivity) in Angular
- Add structured data with [`useSchemaOrg()`](https://unhead.unjs.io/docs/schema-org/api/composables/use-schema-org)
- Explore [title templates](https://unhead.unjs.io/docs/head/guides/core-concepts/titles) for consistent page titles

[Edit this page](https://github.com/unjs/unhead/edit/main/docs/0.angular/head/guides/0.get-started/1.installation.md)

[Markdown For LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/0.angular/head/guides/0.get-started/1.installation.md)

Did this page help you?

[Upgrade Guide Learn how to migrate between Unhead versions for Angular users.](https://unhead.unjs.io/docs/angular/head/guides/get-started/migration) 

On this page

- [How Do I Set Up Unhead in Angular?](#how-do-i-set-up-unhead-in-angular)
- [How Do I Make Head Tags Reactive?](#how-do-i-make-head-tags-reactive)
- [What Default Tags Does Unhead Add?](#what-default-tags-does-unhead-add)
- [Next Steps](#next-steps)

[GitHub](https://github.com/unjs/unhead) [ Discord](https://discord.com/invite/275MBUBvgP)

[ /llms.txt](https://unhead.unjs.io/llms.txt)

[Part of the UnJS ecosystem](https://unjs.io/)

### Articles

- [Announcing Unhead v2](https://unhead.unjs.io/releases/v2)

### Tools

- [Meta Tag Generator](https://unhead.unjs.io/tools/meta-tag-generator)
- [OG Image Generator](https://unhead.unjs.io/tools/og-image-generator)
- [Schema.org Generator](https://unhead.unjs.io/tools/schema-generator)

### Head

- [Overview](https://unhead.unjs.io/docs/angular/head/guides/get-started/overview)
- [Introduction to Unhead](https://unhead.unjs.io/docs/angular/head/guides/get-started/intro-to-unhead)
- [Starter Recipes](https://unhead.unjs.io/docs/angular/head/guides/get-started/starter-recipes)

### Schema.org

- [Introduction](https://unhead.unjs.io/docs/angular/schema-org/guides/get-started/overview)

Copyright © 2025-2026 Harlan Wilton - [MIT License](https://github.com/unjs/unhead/blob/main/license)