How to Set HTML Meta tags using Angular 6

,



Angular 6 Meta service is pretty easy to use and it has following methods and names are self-explanatory. We’ll see all the methods in action with an example.

  • addTag
  • addTags
  • getTag
  • getTags
  • updateTag
  • removeTag
  • removeTagElement

We need to import this service from @angular/platform-browser and injecting it in a component or service of yours. Like:

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


addTag

The method name explains its purpose. This is used to add meta tags. Like:

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

@Component({
  selector: 'my-app',
  templateUrl: './home.html',
})

export class HomeComponent {
 constructor(private meta: Meta) {
    this.meta.addTag({ name: 'description', content: 'How to use Angular 6 meta service' });
    this.meta.addTag({ name: 'author', content: 'Prohcj' });
    this.meta.addTag({ name: 'keywords', content: 'Angular, Meta Service' });
  }
}

addTags

The addTag method adds the meta tags one by one, but using addTags you can multiple meta tags in one set. Like:


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

@Component({
  selector: 'my-app',
  templateUrl: './home.html',
})

export class HomeComponent {
 constructor(private meta: Meta) {
    this.meta.addTags([
      {name: 'description', content: 'How to use Angular 6 meta service'},
      {name: 'author', content: 'Prohcj'},
      {name: 'keywords', content: 'Angular, Meta Service'}
    ]);
  }


getTag

The getTag method returns the value of Meta tag. This method takes an attribute selector string and returns an HTMLMetaElement. Here’s an example of how getTag can be used.

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

@Component({
  selector: 'my-app',
  templateUrl: './home.html',
})

export class HomeComponent {
 constructor(private meta: Meta) {
    this.meta.addTag({ name: 'description', content: 'How to use Angular 6 meta service' });
    this.meta.addTag({ name: 'author', content: 'Prohcj' });
    const author = this.meta.getTag('name=author');
    console.log(author.content); //Prohcj
  }
}


getTags

Similar to the getTag, the getTags also takes an attribute selector string and returns an array of HTMLMetaElement. Like:


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

@Component({
  selector: 'my-app',
  templateUrl: './home.html',
})

export class HomeComponent {
 constructor(private meta: Meta) {
    this.meta.addTag({ name: 'description', content: 'How to use Angular 6 meta service' });
    this.meta.addTag({ name: 'author', content: 'Prohcj' });
    this.meta.addTag({ name: 'author', content: 'Other Author' }, true);
    const author = this.meta.getTags('name=author');
    console.log(author[0]); //<meta name="author" content="Prohcj">
    console.log(author[1]); //<meta name="author" content="Other Author">
  }
}


updateTag

This method updates the content of any existing tag. Like:

this.meta.addTag({ name: 'description', content: 'How to use Angular 6 meta service' });
this.meta.updateTag({ name: 'description', content: 'Angular 6 meta service' });

removeTag

The removeTag method takes an attribute selector and removes the tag. In real application, there are hardly any situations where you would want to do this. However, if required, you can use this method to remove any meta tag. Like:

this.meta.addTag({ name: 'author', content: 'Prohcj' });
this.meta.removeTag('name="author"'); 


removeTagElement

Similar to the removeTag method, the removeTagElement also removes the meta tag. But it takes an HTMLTagElement directly instead of a string selector. Like:

this.meta.addTag({ name: 'author', content: 'Prohcj' });
const author = this.meta.getTag('name=author');
this.meta.removeTagElement(author); 





Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.