Set or Update new Title and Meta Tag- Angular

add/update title and meta tags at runtime on Pages

Problem- In Angular applications, we usually see the same title and meta tag along with all pages. So problem is, can we update or set different titles and meta tags in the angular applications?

The answer is Yes. But How?
This article is all about setting/updating different titles and meta tags along with all pages.

Title

To set different “Title” on the page(head section)

Step 1-

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

Step 2-

public constructor(private titleService: Title) { }
ngOnInit() {
    this.titleService.setTitle("your page title");
  }

Same steps you can repeat on different pages where you want to set new Title of Page

Meta

To set/update different “Meta” on the page(head section)

Step 1-

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

Step 2-

public constructor(private metaService: Meta) { }

Add New Meta Tags

ngOnInit() {
    this.metaService.addTags([
      {name: 'keywords', content: 'your keywords content'},
      {name: 'description', content: 'your page description content'},
    ]);
  }

Update Meta Tag

ngOnInit() {
    this.metaService.updateTag({ name: 'keywords', content: 'your updated keywords content'});
  }

Remove Meta Tag

ngOnInit() {
    this.metaService.removeTag({ name: 'keywords', content: 'your updated keywords content'});
  }

Happy Learning….👏👏👏👏