Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

ngmeta

MichaelSolati178MIT13.0.0TypeScript support: included

A tool for updating meta tags in an Angular application.

angular, ng, meta, tags, seo

readme

ngmeta

npm npm bundle size GitHub stars GitHub forks

A tool for updating meta tags in an Angular application.

Getting Started

npm i ngmeta

How To Use

First import the NgMeta as a provider into your app.

import { NgMeta } from 'ngmeta';
...
@NgModule({
  providers: [
    NgMeta
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

To dynamically edit this data whenever a page is loaded. Import NgMeta into your component, then inside of your constructor pass in the NgMeta service as an argument.

import { NgMeta } from 'ngmeta';
...
export class AppComponent {
    constructor(private ngmeta: NgMeta) {}
}

Then in the component we can call our NgMeta service this.ngmeta.setHead(). This takes an object of the new values for the tags you want. Below we change the title and description data on a page.

this.ngmeta.setAll({
  title: "Google",
  description:
    "Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.",
});

Now our head data will display

<head>
  <title>Google</title>
  <meta
    name="description"
    content="Search the world's information, including
  webpages, images, videos and more. Google has many special features to help
  you find exactly what you're looking for."
  />
</head>

Documentation

Full documentation for the NGMeta service is available here.

Changes

Changes happen, check out the changelog to see the latest changes.

changelog

13.0.0 (2022-04-10)

Chores

12.0.0 (2021-12-13)

Chores

11.2.0 (2021-01-06)

Bug Fixes
  • setTag: allow for type attribute of element (8642a3d7)

11.1.0 (2021-01-06)

New Features
  • setTag: add method to set miscellaneous tags in head (ef2c8acf)

11.0.0 (2020-12-13)

Build System / Dependencies
Chores
Code Style Changes

10.1.0 (2020-08-02)

New Features
  • update methods to return instance of service (18dc7a1c)
  • make scrollToTop method public (cd678c07)
  • expose native Angular meta service (24a9fc72)
Refactors
  • rename constructor arguments (c75b4fdd)

10.0.0 (2020-07-23)

Build System / Dependencies
  • move to GitHub Actions for CI (e0ed10b9)
Chores
Documentation Changes
  • README: update badges and link to docs (792157b0)
Bug Fixes
  • setTwitter: make sure image exists in order to set image alt (9bb4a7c0)

9.2.0 (2020-05-17)

Build System / Dependencies

9.1.0 (2020-05-17)

Refactors

9.0.2 (2020-05-17)

Build System / Dependencies

9.0.1 (2020-05-16)

Bug Fixes

9.0.0 (2020-05-16)

Chores
Refactors
  • rewrite library and update for angular 9 (c392efbe)

8.0.0 (2019-06-27)

Chores
Documentation Changes
  • README.md: update readme with better code examples (810f60a5)
Refactors

7.0.0 (2018-10-26)

Chores

6.0.1 (2018-10-10)

6.0.0 (2018-10-10)

Chores
  • update dependencies for Angular 6 (7b536a44)

5.0.2 (2018-04-15)

Chores

5.0.1 (2018-02-20)

Bug Fixes
  • scroll: scroll window instead of body (4c3f3664)

5.0.0 (2018-02-08)

Chores

1.3.1 (2017-08-08)

Bug Fixes
  • metadata: fix setting of meta and other tags (8dc85585)

1.3.0 (2017-08-04)

Build System / Dependencies
Chores
  • version: upgrade for support of Angular 4 (f01feb73)
Bug Fixes
  • build:
Refactors

1.2.4 (2017-07-05)

  • Fix to include dist in bundle.

1.2.3 (2017-07-05)

  • Fix for building with Angular CLI.

1.2.2 (2017-07-05)

  • Further improvements to overall application stability and other minor adjustments have been made to enhance the user experience.

1.2.1 (2017-07-05)

  • Prerendering bug fixes.

1.2.0 (2017-07-05)

  • Update for support of Angular 4.

1.1.0 (2017-02-28)

  • setCanonical(canonicalURL: string) function removed, replaced with setter function just called canonical(canonicalURL: string). To call this._ngmeta.canonical = 'https://www.google.com';.
  • setTitle(title: string) function removed, replaced with setter function just called title(title: string). To call this._ngmeta.title = 'Google';.
    • Added a getter as well, title() will return current page's title. To call let title: string = this._ngmeta.title;.
  • setMeta(attribute: string, type: string, content: string) function removed, replaced with createMeta(metaData: MetaData).
  • setScrollEnabled(scroll: boolean) removed, replaced with setter function just called scrollEnabled(scroll: boolean). To call this._ngmeta.scrollEnabled = true;.
    • Added a getter as well, scrollEnabled() will return if scroll to top is enabled. To call let scrollEnabled: boolean = this._ngmeta.scrollEnabled;.

1.0.0 (2016-11-19)

WELCOME! For more information about the latest API, please, refer to the official docs.