Angular 2: How to add and update the meta tags dynamically from a component (like title service)

First import Meta service in 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 more information in oficial DOCS:

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

In Angular4-beta.0 a Meta service was added that allows you to add/remove meta tags

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

constructor(private meta:Meta) {
  meta.addTag(...)
}

For more details see

• https://angular.io/api/platform-browser/Meta
• https://github.com/angular/angular/pull/12322/files#diff-7979e98d95c45d21e56cf2602244f220R36

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

1. Import the predefined Meta Service in your component.

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

2. Inject the Service in Constructor.

constructor(private title: Title, private meta: Meta) {} 

3. Add title and meta tag in 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'});    
    }

4. Check the head tag in the browser.