Meta tags in Angular

Published On - January 29, 2020

Jugal Development

 

In this article we discuss how to set the HTML meta tags in our angular apps. To set meta tags we need to import service @angular/platform-browser.


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

Meta service provides following methodes.

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

addTag

Using “addTag” we can add the metatags in our Angular apps.


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

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

export class DashboardComponent {
 constructor(private meta: Meta) {
    this.meta.addTag({ name: 'description', content: 'Description of the Page' });
    this.meta.addTag({ name: 'keywords', content: 'metakeywords' }); 
  }
}

addTags

Using “addTags” we can pass the array object.


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

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

export class DashboardComponent {
 constructor(private meta: Meta) {
    this.meta.addTags([
                      { name: 'description', content: 'Description of the Page' },
                      { name: 'keywords', content: 'metakeywords' }
                     ]); 
  }
}

getTag & getTags

Using getTag & getTags we can get the value of the particuar meta tag. getTag returns the single value where getTags returns the array of the values.


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

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

export class DashboardComponent {
 constructor(private meta: Meta) {
    this.meta.addTag({ name: 'description', content: 'Description ' });
    this.meta.addTag({ name: 'author', content: 'metauser' });
    
    // get single data.
    const authorname = this.meta.getTag('name=author');
    console.log(author.content);    // singleuser
    
    //array of the tags
    const authorname = this.meta.getTags('name=author');
    console.log(author.content);   //dispay array of the author.
  }
}

updateTag

Using “updateTag” we can change the meta values on runtime.


import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';
@Component({
  selector: 'my-applications',
  templateUrl: './dashboard.html',
})
export class DashboardComponent {
 constructor(private meta: Meta) {

    this.meta.addTag({ name: 'description', content: 'Meta Description' });
    this.meta.updateTag({ name: 'description', content: 'Meta Description Update' });
    
  }
}

removeTag

Using “removeTag” method it takes attribute selector and removes the tag.


import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';
@Component({
  selector: 'my-applications',
  templateUrl: './dashboard.html',
})
export class DashboardComponent {
 constructor(private meta: Meta) {

    this.meta.addTag({ name: 'description', content: 'Meta Description' });
    this.meta.removeTag('name="description"');
 
  }
}