Skip to content

A document head manager for Angular

License

Notifications You must be signed in to change notification settings

reynirf/ng-helmet

This branch is 8 commits ahead of jadengis/ng-helmet:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

9f1fabb · Feb 28, 2023

History

38 Commits
Apr 21, 2021
Feb 28, 2023
Apr 19, 2021
Feb 28, 2023
Apr 19, 2021
Apr 19, 2021
Sep 10, 2021
Apr 19, 2021
Apr 19, 2021
Apr 19, 2021
Aug 15, 2022
Aug 15, 2022
Feb 28, 2023
May 25, 2022
May 25, 2022
Feb 28, 2023
Feb 28, 2023
Feb 28, 2023
Feb 28, 2023

Repository files navigation

Angular Helmet

Build Test Lint

Angular Helmet is a simple and intuitive document head manager for Angular applications. Inspired by React Helmet.

Installation

npm:

npm install --save ng-helmet

Yarn:

yarn add ng-helmet

Compatibility

Version Angular Version
1.x.x >=9 <13
2.x.x >=13 <15

Features

  • Supports the following head tags: title and meta.
  • Supports server-side rendering out of the box.
  • Nested components override duplicate head changes.

Usage

Import the NgHelmetModule into your AppModule to access the ng-helmet component in your components. This module can be optionally configured with the forRoot method:

import { NgHelmetModule } from "glaze-ng-helmet";

@NgModule({
  imports: [
    NgHelmetModule.forRoot({
      baseTitle: "| Replay Value",
    }),
  ],
})
export class AppModule {}

The supported configuration parameters are:

Property Requirement Description
baseTitle Optional An optional fixed portion of the browser title, usually the website name.

Example

In a component template:

<div class="application">
  <ng-helmet>
    <title>My Title</title>
    <meta charset="utf-8" />
  </ng-helmet>
  ...
</div>

Nested or latter components will override duplicate changes, and meta elements without a content attribute will be removed for the document head:

<div class="parent">
  <ng-helmet>
    <title>My Title</title>
    <meta name="description" content="NgHelmet application" />
    <meta name="some-property" content="some-value" />
  </ng-helmet>

  <div class="child">
    <ng-helmet>
      <title>Nested Title</title>
      <meta name="description" content="Nested component" />
      <meta name="some-property" />
    </ng-helmet>
  </div>
</div>

outputs:

<head>
  <title>Nested Title</title>
  <meta name="description" content="Nested component" />
</head>

License

MIT

About

A document head manager for Angular

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 99.1%
  • Other 0.9%