CODEWITHSUNDEEP
javascriptangulartypescriptmeta-tags
stack new
stack new

Reputation: 79

How to add/remove/update meta tags from angular app dynamically

I created a MetaService, which will create all the metaTags from fetching API.

Below is code,

  public addMetaTags(seoData): void {
    this.meta.addTag({ name: 'description', content: 'example description' });
    this.meta.addTag({ property: 'og:title', content: 'example title' });
    this.meta.addTag({ property: 'og:description', content: 'example og:description' });
    this.meta.addTag({ property: 'og:site_name', content: 'example og:site_name' });
  }

But issue is, When I navigate from Page A to Page B. Already created tags not cleared.

How do I check if MetaTag's already created and update them accordingly ?

Upvotes: 0

Views: 5246

Answers (1)

Ali Keserwan
Ali Keserwan

Reputation: 219

This is the documentation: https://angular.io/api/platform-browser/Meta

you can call this.meta.getTag(key) to check.

you can do this to update:

this.meta.updateTag({ itemprop: 'name', content: subject });
this.meta.updateTag({ itemprop: 'description', content: desc });
this.meta.updateTag({ name: 'twitter:title', content: subject });
this.meta.updateTag({ name: 'twitter:description', content: desc });
this.meta.updateTag({ property: 'og:title', content: subject });
this.meta.updateTag({ property: 'og:description', content: desc });

If your app applies SSR feature, you may not need updateTag, no need to update the tags on the client side.

Upvotes: 3

Related Questions