adding/updating meta tags not working in angular5

Question

I used below code for adding or updating meta tags at runtime in angular5

import { Title ,Meta} from '@angular/platform-browser'; 
constructor( private meta:Meta)
 {
 this.meta.addTags([
            {name: 'description', content: 'How to use Angular 4 meta 
       service'},
            {name: 'author', content: 'talkingdotnet'},
            {name: 'keywords', content: 'Angular, Meta Service'}
          ]);
this.meta.updateTag({ name: 'description', content: 'Angular 4 meta service' 
 });
  }

imported meta service in appmodule

But it is not working(not in my page source).can anyone pls help me

Thanks

Answer 1

You need to just change :

this.meta.updateTag({ content: 'Angular 4 meta service'} , 'name="description"' );

WORKING DEMO (Instead of view page source check via inspect element) Reason is explained below

Your method is also working 100% fine , you can check that in my given demo.

---

Angular is not served from server side , that's why you can see any meta tags via page view source , any thing that is being changed after page loads that won't be shown in page view source

If you want to check the updated meta tags you need to inspect element and check there

If you want to server side rendering then you can go for Angular Universal

Answer 2

Please try using this template

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public constructor(public meta: Meta, public pageTitle: Title) {
    pageTitle.setTitle("MySite.COM");
    const keywords: MetaDefinition = {
      name: "keywords",
      content: "angular2, java, javaEE, angular-universal"
    }
    const description: MetaDefinition = {
      name: "description",
      content: "This is a description"
    }
    this.meta.addTags([keywords, description]);
  }

  title = 'app';
}

Refer url for more updates