Set or Update New Title and Meta Tag - Angular by@anilvermaspeaks

Set or Update New Title and Meta Tag - Angular

tldt arrow
Read on Terminal Reader

Too Long; Didn't Read

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/tags along with pages.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Set or Update New Title and Meta Tag - Angular
Anil Verma HackerNoon profile picture

@anilvermaspeaks

Anil Verma

Software Engineer

Learn More
LEARN MORE ABOUT @ANILVERMASPEAKS'S EXPERTISE AND PLACE ON THE INTERNET.
react to story with heart

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 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….👏👏👏👏

RELATED STORIES

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa