---
title: "How to Use Head Components in Angular"
description: "Use unhead-head, unhead-title, unhead-meta components in Angular templates. Import Head from @unhead/angular."
canonical_url: "https://unhead.unjs.io/docs/angular/head/guides/core-concepts/components"
last_updated: "2026-06-19T10:04:28.442Z"
---

**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 {}
```