@unhead/angular
TypeScript icon, indicating that this package has built-in type declarations

2.0.8 • Public • Published

@unhead/angular

Full-stack <head> management for Angular applications

npm version npm downloads License

Features

  • 🧩 Angular-optimized head management
  • 🔄 Reactive titles, meta tags, and other head elements
  • 🔍 SEO-friendly head control
  • 🖥️ Server-side rendering support
  • 💉 Angular dependency injection integration
  • 📦 Lightweight with zero dependencies (except for Angular & unhead)

Installation

# npm
npm install @unhead/angular

# yarn
yarn add @unhead/angular

# pnpm
pnpm add @unhead/angular

Usage

Setup

First, provide the Unhead service in your application:

// app.config.ts
import { ApplicationConfig } from '@angular/core'
import { provideClientHead } from '@unhead/angular'

export const appConfig: ApplicationConfig = {
  providers: [
    // ... other providers
    provideClientHead(),
  ]
}

For server-side rendering (Angular Universal):

// server.ts
import { provideServerHead } from '@unhead/angular'

// In your server module providers:
providers: [
  // ... other providers
  provideServerHead(),
]

Basic Usage

// app.component.ts
import { Component } from '@angular/core'
import { Unhead } from '@unhead/angular'

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
})
export class AppComponent {
  constructor(private unhead: Unhead) {
    // Set page title
    this.unhead.useHead({
      title: 'My Application',
    })
  }
}

Setting Meta Tags

// home.component.ts
import { Component, OnInit } from '@angular/core'
import { Unhead } from '@unhead/angular'

@Component({
  selector: 'app-home',
  template: '<h1>Home</h1>',
})
export class HomeComponent implements OnInit {
  constructor(private unhead: Unhead) {}

  ngOnInit() {
    this.unhead.useSeoMeta({
      title: 'Home Page',
      description: 'Welcome to our website',
      ogTitle: 'Welcome to Home Page',
      ogDescription: 'Our fantastic home page',
      ogImage: 'https://example.com/image.jpg',
    })
  }
}

Reactive Head Elements

// profile.component.ts
import { Component, signal } from '@angular/core'
import { Unhead } from '@unhead/angular'

@Component({
  selector: 'app-profile',
  template: `
    <h1>{{ userName() }}'s Profile</h1>
    <button (click)="updateName('New Name')">Update Name</button>
  `,
})
export class ProfileComponent {
  userName = signal('User')

  constructor(private unhead: Unhead) {
    this.unhead.useHead({
      title: () => `${this.userName()} - Profile`, // Reactive title
      meta: [
        {
          name: 'description',
          content: () => `${this.userName()}'s profile page`, // Reactive description
        },
      ],
    })
  }

  updateName(name: string) {
    this.userName.set(name)
    // Title and meta automatically update!
  }
}

Development

# Install dependencies
npm install

# Generate build files
npm run build

# Run tests
npm run test

License

MIT

Readme

Keywords

none

Package Sidebar

Install

npm i @unhead/angular

Weekly Downloads

18

Version

2.0.8

License

MIT

Unpacked Size

43.5 kB

Total Files

36

Last publish

Collaborators

  • harlan_zw