adding/updating meta tags not working in angular5

Ask Time：2018-01-10T14:18:56 Author：kamalav

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

Author:kamalav，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/48181368/adding-updating-meta-tags-not-working-in-angular5

bhantol :

Just use addTags. updateTags is for existing tags.\n\nWith just addTags\n\nthis.meta.addTags([\n {name: 'description', content: 'How to use Angular 4 meta service'},\n {name: 'author', content: 'talkingdotnet'},\n {name: 'keywords', content: 'Angular, Meta Service'}\n]);\n\n\nYou get the following:\n\n\n\nFurther with updateTag notice the description change:\n\nthis.meta.addTags([\n {name: 'description', content: 'How to use Angular 4 meta service'},\n {name: 'author', content: 'talkingdotnet'},\n {name: 'keywords', content: 'Angular, Meta Service'}\n]);\n\nthis.meta.updateTag({ name: 'description', content: 'Angular 4 meta service'});\n\n",

2018-01-23T17:01:04

Vivek Doshi :

You need to just change :\n\nthis.meta.updateTag({ content: 'Angular 4 meta service'} , 'name=\"description\"' );\n\n\nWORKING DEMO (Instead of view page source check via inspect element) Reason is explained below\n\nYour method is also working 100% fine , you can check that in my given demo.\n\n\n\n\n Angular is not served from server side , that's why you can see any\n meta tags via page view source , any thing that is being changed after page loads that won't be shown in page view source\n \n If you want to check the updated meta tags you need to inspect element\n and check there\n \n If you want to server side rendering then you can go for Angular Universal\n",

2018-01-23T13:40:37

deepak thomas :

Please try using this template\n\nimport { Component } from '@angular/core';\nimport { Title, Meta, MetaDefinition } from '@angular/platform-browser';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n\n public constructor(public meta: Meta, public pageTitle: Title) {\n pageTitle.setTitle(\"MySite.COM\");\n const keywords: MetaDefinition = {\n name: \"keywords\",\n content: \"angular2, java, javaEE, angular-universal\"\n }\n const description: MetaDefinition = {\n name: \"description\",\n content: \"This is a description\"\n }\n this.meta.addTags([keywords, description]);\n }\n\n title = 'app';\n}\n\n\nRefer url for more updates",

2018-01-23T13:55:12

adding/updating meta tags not working in angular5