Tutorial

How To Use Angular's Meta Service to Get, Add, Update, and Remove Information

Angular

Introduction

Angular’s Meta service allows you to get or set different meta tags depending on the current active route in your app.

Note: The Angular Meta service is available for Angular 4 and greater.

Let’s go over its use and the available methods.

Prerequisites

If you would like to follow along with this article, you will need:

• Some familiarity with HTML meta elements.
• Some familiarity with Angular services.

This tutorial was verified with Node v16.2.0, npm v7.15.1, and angular v12.0.3.

Using addTag and addTags

Using the Meta service requires importing it from @angular/platform-browser and injecting it in a component or service.

import { Meta } from '@angular/platform-browser';

With multiple meta tags, you can use the addTags method instead to set them all in the same call.

Here’s an example where we add meta tags for a Twitter card when the component is loaded:

constructor(private meta: Meta) {
  this.meta.addTags([
    { name: 'twitter:card', content: 'summary_large_image' },
    { name: 'twitter:site', content: '@alligatorio' },
    // ...
  ]);
}

This code will produce the following result in the page:

Note that both addTag and addTags can take a second boolean argument to indicate if the tag should be created even if it already exists.

Here for example the tag will be added twice:

constructor(private meta: Meta) {
    this.meta.addTags([
      { name: 'twitter:site', content: '@alligatorio' },
      { name: 'twitter:site', content: '@alligatorio' }
    ], true);
  }
}

This code will produce the following result in the page:

addTag and addTags allow you to add new meta tags.

Using getTag and getTags

Analogous to the addTag and addTags methods, there are also the getTag and getTags methods.

Consider an application with the following meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Here’s an example of how getTag can be used:

constructor(private meta: Meta) {
  const viewport = this.meta.getTag('name=viewport');
  if (viewport) console.log(viewport.content);
}

The content will be output to the console.

getTag takes an attribute selector string and returns an HTMLMetaElement. getTags also takes an attribute selector, but returns an array with potentially multiple HTMLMetaElements that match the selector.

Using updateTag

Given a new meta tag definition and a selector, the updateTag method will update any tag that matches the selector.

In the following, somewhat contrived, example, we first set a meta tag with a content of summary_large_image and then update it to just summary:

constructor(private meta: Meta) {
  this.meta.addTag(
    { name: 'twitter:card', content: 'summary_large_image' }
  );

  this.meta.updateTag(
    { name: 'twitter:card', content: 'summary' },
    `name='twitter:card'`
  );
}

In a real app you would probably instead want to update meta tags that are present globally in the app, but that should take different values depending on the active route.

Using removeTag and removeTagElement

The removeTag method takes a string for an attribute selector and removes the tag.

Consider an application with the following meta tag:

<meta charset="utf-8">

Not that you’d ever want to do this, but here’s how you could remove the charset meta tag:

constructor(private meta: Meta) {
  this.meta.removeTag('charset');
}

The removeTagElement is similar, but instead takes an HTMLTagElement directly instead of a string selector.

Here’s the same example, but here we first get the charset meta tag element:

constructor(private meta: Meta) {
  const charsetTag = this.meta.getTag('charset');
  if (charsetTag) this.meta.removeTagElement(charsetTag);
}

Both approaches will remove the meta element.

Conclusion

In this article, you learned how to use Angular’s Meta service to get, add, update, and remove meta tags.

Continue your learning with our guide on updating the page title declaratively using ngrx.