Tutorial

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

Updated on June 4, 2021
author

Alligator.io

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

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:

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:

Output
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@alligatorio">

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:

Output
<meta name="twitter:site" content="@alligatorio"> <meta name="twitter:site" content="@alligatorio">

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.

Output
width=device-width, initial-scale=1

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alligator.io

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
1 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Will it work for SPA or do you need an SSR application using Angular Universal?

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel