Geek Answers Handbook

Angular 2: How to dynamically add and update meta tags using a component (such as a header service)

I am very new to Angular 2. I need to set up meta tags like og: description and all of the component. I do not know how to dynamically update meta tags, as well as add new tags to index.html from a specific component.

Please, help.

PS: I read about the header service, but this is only for updating the name.

+11
angular
source share
3 answers

Meta service was added to Angular4-beta.0 , which allows adding / removing meta tags.

 import { Meta } from '@angular/platform-browser'; constructor(private meta:Meta) { meta.addTag(...) }

For more information see

+6
source share

First import of a Meta service into your component

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

Put it in the constructor

 constructor(private Meta:Meta){}

Use the service:

 this.Meta.addTag({ name: 'yourmetaname', content: 'yourmetacontent' });

You can look for additional information in official DOCS:

https://angular.io/docs/ts/latest/api/platform-browser/index/Meta-class.html

+8
source share

In Angular 4, you can easily update your web page title and meta tag information.

  1. Import the predefined meta service into your component.
  import { Meta, Title } from '@angular/platform-browser';
  1. Enter Service in the Designer.
 constructor(private title: Title, private meta: Meta) {}
  1. Add title and meta tag to ngOnInit () using setTitle and updateTag
  ngOnInit(){ this.title.setTitle('Angular Overview'); this.meta.updateTag({ name:'author',content:'angulartpoint.com'}); this.meta.updateTag({name:'keyword',content:'angular overview, features'}); this.meta.updateTag({name:'description',content:'It contains overview of angular application'}); }
  1. Check the tag title in the browser.
    enter image description here
+4
source share

More articles:


All Articles