How to Use Head Components in Angular

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:

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