---
title: How to Use Head Components in Angular
description: Learn how to use Unhead components to manage head tags in Angular templates.
navigation:
  title: 'Head Component'
---

**Quick Answer:** Use `<unhead-head>`, `<unhead-title>`, `<unhead-meta>`, `<unhead-link>`, and `<unhead-script>` components in Angular templates. Import from `@unhead/angular`.

The `@unhead/angular` package exports a `Head` component that can be used to manage your head tags.

While it's recommended to use the `useHead()` function as it offers a more flexible API with full TypeScript support,
the `Head` component may make more sense for your project.

## How Do I Use Head Components in Angular?

Import the `Head` component and use it in your Angular templates with the `unhead-head` selector:

```ts
import { Component } from '@angular/core'
import { Head } from '@unhead/angular'

@Component({
  selector: 'app-my-page',
  standalone: true,
  imports: [Head],
  template: `
    <unhead-head>
      <title>My awesome site</title>
      <meta name="description" content="My awesome site description">
    </unhead-head>
  `,
})
export class MyPageComponent {}