• Public
  • Public/Protected
  • All


ngmeta Build Status

A tool for updating meta tags in an Angular application.

Getting Started

npm install --save ngmeta

How To Use

First import the NgMetaModule into your app.

import { NgMetaModule } from 'ngmeta';
  imports: [
  bootstrap: [
export class AppModule { }

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

import { NgMetaService } from 'ngmeta';
export class HomePage {
    constructor(private _ngmeta: NgMetaService) {}

Then in the component we can call our NgMetaService 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.

  title: 'Google',
  meta : [
    {attribute: 'name', type: '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.'}

Now our head data will display

<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.'>


Full documentation for the NGMeta service is available here.


For typing you can take two of ther interfaces that NgMetaService uses by importing them with

import { TagData, MetaData } from 'ngmeta';
interface MetaData {
    type: string;
    content: string;
    attribute?: string;
interface TagData {
    title?: string;
    name?: MetaData[];
    property?: MetaData[];
    meta?: MetaData[];
    canonical?: string;


Function Description
set canonical(canonicalURL: string) Sets canonical tag for page, to call this._ngmeta.canonical = 'https://www.google.com';.
public createMeta(metaData: MetaData) Creates HTML for a <meta> tag of any attribute.
get scroll() Returns boolean value if scroll to top is enabled, to call let scroll: boolean = this._ngmeta.scroll;.
set scroll(scroll: boolean) Sets wether <body></body> should scroll to top on route change, to call this._ngmeta.scroll = true;.
public setHead(tagData: TagData) Set function setting all <head></head> metadata.
get title() Returns string value of current page's title, to call let title: string = this._ngmeta.title;.
set title(title: string) Sets <title></title> tag for page, to call this._ngmeta.title = 'Google';.


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

Generated using TypeDoc