Introduction: 

While running an angular project we set meta data as a static content under it's index.html file, which never get changed after moving to different pages and will try to set the header meta description and title and tags content dynamically.

It enhances SEO as search engines index title and description tags.

Approach

Creating a service class for it, consider the name as metaTag.service.ts
 

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

@Injectable({
    providedIn: 'root'
})
export class MetaTagService {
  private title:string = "BitHost | TalkB";
  constructor(private titleService: Title, private meta: Meta){}

  set_page_title(title:string = "BitHost") {
    this.titleService.setTitle(title);
    this.title = title;
  }
  

  update_meta_tags_defaults(jsonObj:any = {}) {
     if (jsonObj) {
       // Setting General Meta Tags and setting of organic meta tags which crawlled by the twitter and facebook
       // Here we go by getting each dynamic property.
       if (jsonObj.hasOwnProperty("keywords") && jsonObj.keywords) {
          this.meta.updateTag({name: "keywords", content: jsonObj.keywords});
       }
       this.meta.updateTag({name: "description", content: jsonObj.short_desc});
       this.update_organics(jsonObj);     
     }
  }
  update_organics(jsonObj) {
     if (jsonObj.ogURL) {
        this.meta.updateTag({property: "og:url", content: jsonObj.ogURL});
        this.meta.updateTag({property: "twitter:image", content: jsonObj.ogURL});
        this.meta.updateTag({property: "twitter:url", content: jsonObj.ogURL});
     }
     if (jsonObj.short_desc) {
        this.meta.updateTag({property: "og:description", content: jsonObj.short_desc});
        this.meta.updateTag({property: "twitter:description", content: jsonObj.short_desc});
        this.meta.updateTag({property: "twitter:card", content: jsonObj.short_desc});
     }
     if (this.title) {
        this.meta.updateTag({property: "og:title", content: this.title});
        this.meta.updateTag({property: "twitter:title", content: this.title});         
     }
   }
}

Now using it in the other components and pages to set the value dynamically based on the page title and page contents.

import { MetaTagService } from '@services/metaTag.service';

// In constructor invoke the MetaTagService under the page where you going to use it.

constructor(private metaTagSvc: MetaTagService) {}

Once it's invoked in the page component constructor, now you have to pass the data to that service class instance under ngOnInit like this.

ngOnInit(){
   this.metaSvc.set_page_title("This is my custom Title for this page...");
   let metaData = {
       keywords: "metatags, dynamically, angular, learning", // You may set here from your dynamic contents
       ogURL: "https://bithost.in",
       short_desc: "I successfully updated meta tags in the serving file..."
   }
   this.metaSvc.update_meta_tags_defaults(metaData);
}

Your dynamic tags updated with the value. 
If there's already added meta tags. You can change the  updateTag to  addTag in service class to dynamically add it, if there's no meta tags available in your index file.

:) Hope this helpful !!!