Socket
Socket
Sign inDemoInstall

ng-helmet

Package Overview
Dependencies
7
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    ng-helmet

A document head manager for Angular


Version published
Weekly downloads
490
increased by196.97%
Maintainers
1
Install size
172 kB
Created
Weekly downloads
 

Readme

Source

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

VersionAngular 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 "ng-helmet";

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

The supported configuration parameters are:

PropertyRequirementDescription
baseTitleOptionalAn 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

Keywords

FAQs

Last updated on 15 Aug 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc