---
title: Installing Unhead with Angular
description: 'Set up Unhead in Angular with provideClientHead() and useHead(). Works with Angular signals for reactive head tags. SSR supported.'
navigation:
  title: 'Installation'
---

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

- [StackBlitz - Unhead - Angular](https://stackblitz.com/edit/stackblitz-starters-e4x42yaz)

## Set Up Unhead

### 1. Install the Package

Install the Angular-specific Unhead package:

:ModuleInstall{name="@unhead/angular"}

### 2. Configure Client-Side Rendering

Add the client provider to your application configuration:

```ts {3,7} [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:

```ts [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)

::note
Not using Server-Side Rendering? You can skip this step. See the [SPA guide](/docs/head/guides/get-started/single-page-applications) for template defaults, crawler limits, and route prerendering.
::

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

```ts [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:

```ts [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:

```ts [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:

```ts [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](/docs/angular/head/guides/core-concepts/reactivity) 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:

- [`useHead()`](/docs/head/api/composables/use-head)
- [`useSeoMeta()`](/docs/head/api/composables/use-seo-meta)
- [`useScript()`](/docs/head/api/composables/use-script)

Related guides:

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