Angular Helmet is a simple and intuitive document head manager for Angular applications. Inspired by React Helmet.
npm:
npm install --save ng-helmetYarn:
yarn add ng-helmet| Version | Angular Version |
|---|---|
1.x.x |
>=9 <13 |
2.x.x |
>=13 <15 |
- Supports the following head tags:
titleandmeta. - Supports server-side rendering out of the box.
- Nested components override duplicate head changes.
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 "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. |
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>MIT