Meta tags in Angular

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"');
 
  }
}