How to get/update/remove Meta Tags in Angular?

In last my article I discussion on how to set Meta Tags. In these article i discuss on How to get,update&remove meta tags in Angular application.
Definition of get Meta method.


getTag(attrSelector: string): HTMLMetaElement | null
getTags(attrSelector: string): HTMLMetaElement[]

getTag gives us single value of the tags name & getTags gives array of the Tags name. Below is the example of the getting tag values.
Example for getTag


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

@Component({
  selector: 'first-page',
  templateUrl: './firstpage.html',
})

export class FirstPageComponent {
 constructor(private meta: Meta) {
    this.meta.addTag({ name: 'description', content: 'Education for betterment is site related to learn easily.' });
    this.meta.addTag({ name: 'keywords', content: 'eduforbetterment, Angular, Learn English' });
    const keyword = this.meta.getTag('name=keywords');
    console.log(keyword.content);  // eduforbetterment, Angular, Learn English
  }
}

In above example we have set value of keywords then we can get that value of keywords value.

Example of getTags


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

@Component({
  selector: 'first-page',
  templateUrl: './firstpage.html',
})

export class FirstPageComponent {
 constructor(private meta: Meta) {
  
    this.meta.addTag({ name: 'keywords', content: 'eduforbetterment, Angular, Learn English' });
    this.meta.addTag({ name: 'keywords', content: 'Meta, Angular services' });
    const keyword = this.meta.getTags('name=keywords');
    console.log(keyword.content[0]);  // eduforbetterment, Angular, Learn English
    console.log(keyword.content[1]);  // Meta, Angular services
  }
}

Update Meta Tag :It helps to update metaValue
Definition of updateTag method

updateTag(tag: MetaDefinition, selector?: string): HTMLMetaElement | null

Example of updateTag


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

@Component({
  selector: 'first-page',
  templateUrl: './firstpage.html',
})

export class FirstPageComponent {
 constructor(private meta: Meta) {
    this.meta.addTag({ name: 'description', content: 'Education for betterment is site related to learn easily.' });
this.meta.updateTag({ name: 'description', content: 'Good Angular tutorial in Education For Betterment Site' });

  }
}

removeTag
It removes the tag from your Angular application. Definition of the RemoveTag

removeTag(attrSelector: string): void

Example of removeTag


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

@Component({
  selector: 'first-page',
  templateUrl: './firstpage.html',
})

export class FirstPageComponent {
 constructor(private meta: Meta) {
this.meta.addTag({ name: 'description', content: 'Good Angular tutorial in Education For Betterment Site' });
this.meta.removeTag('name="description"'); 
  }
}

removeTagElement
It also remove tags. But it takes an HTMLTagElement directly instead of a string selector.

removeTagElement(meta: HTMLMetaElement): void

Example of removeTagElement


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

@Component({
  selector: 'first-page',
  templateUrl: './firstpage.html',
})

export class FirstPageComponent {
 constructor(private meta: Meta) {
this.meta.addTag({ name: 'description', content: 'Good Angular tutorial in Education For Betterment Site' });
const description = this.meta.getTag('name=description');
this.meta.removeTagElement(description);
  }
}
Spread the love
  • 27
  •  
  •  
  •  
  • 6
  •  
  •  
  •