In Angular applications, we usually see the same title and meta tag along with all pages. So the problem is, can we update or set different titles and meta tags in the angular applications? The answer is But How? Yes. This article is all about setting/updating different titles and meta tags along with all pages. Title To set different “ ” on the page(head section) Title 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….👏👏👏👏

Render Lists using Infinite Scroll in AngularJS

The Biggest Features in ES2020/ES2021

Website

Nominated for 2022 - HackerNoon Contributor of the Year - Flutter

Nominated for 2022 - HackerNoon Contributor of the Year - Css3

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - News

Too Long; Didn't Read

Make resilience your competitive advantage

Set or Update New Title and Meta Tag - Angular

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Angular v14's New Features

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Angular v14's New Features

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps