ANGULAR

Complete Angular Tutorial For Beginners Introduction to Angular | What is Angular? Architecture Overview & Concepts of Angular How to Install Angular How to Create a new project in Angular Bootstrapping in Angular: How It Works Internally Angular Components Overview & Examples Data Binding in Angular Interpolation in Angular Property Binding in Angular Event Binding in Angular ngModel & Two way Data binding in Angular NgModelChange & Change Event in Angular Child/Nested Components in Angular angular directives angular ngFor directive ngSwitch, ngSwitchcase, ngSwitchDefa ult Angular Example How to use ngIf, else, then in Angular By example NgClass Example Conditionally apply class Angular ngStyle Directive Angular Trackby to improve ngFor Performance How to Create & Use Custom Directive In Angular Working with Angular Pipes How to Create Custom Pipe in Angular Formatting Dates with Angular Date Pipe Using Angular Async Pipe with ngIf & ngFor angular keyValue pipe Using Angular Pipes in Components or Services Angular Component Communication & Sharing Data Angular Pass data to child component Angular Pass data from Child to parent component Component Life Cycle Hooks in Angular Angular ngOnInit And ngOnDestroy Life Cycle hook Angular ngOnChanges life Cycle Hook Angular ngDoCheck Life Cycle Hook Angular Forms Tutorial: Fundamentals & Concep t s Angular Template-driven forms example How to set value in template-driven forms in Angular Angular Reactive Forms Example Using Angular FormBuilder to build Forms SetValue & PatchValue in Angular StatusChanges in Angular Forms ValueChanges in Angular Forms FormControl in Angular FormGroup in Angular Angular FormArray Example Nested FormArray Example Add Form Fields Dynamically SetValue & PatchValue in FormArray Angular Select Options Example in Angular Introduction to Angular Services Introduction to Angular Dependency Injection Angular Injector, @Injectable & @Inject Angular Providers: useClass, useValue, useFactory & useExisting Injection Token in Angular How Dependency Injection & Resolution Works in Angular Angular Singleton Service ProvidedIn root, any & platform in Angular @Self, @SkipSelf & @Optional Decorators Angular '@Host Decorator in Angular ViewProviders in Angular Angular Reactive Forms Validation Custom Validator in Angular Reactive Form Custom Validator with Parameters in Angular Inject Service Into Validator in Angular template_driven_form_validation_in_angular Custom Validator in Template Driven Forms in Angular Angular Async Validator Example Cross Field or Multi Field Validation Angular How to add Validators Dynamically using SetValidators in Angular Angular HttpClient Tutorial & Example Angular HTTP GET Example using httpclient Angular HTTP POST Example URL Parameters, Query Parameters, httpparams in Angular HttpClient Angular HTTPHeaders Example Understanding HTTP Interceptors in Angular Angular Routing Tutorial with Example Location Strategy in Angular Angular Route Params Angular : Child Routes / Nested Route Query Parameters in Angular Angular Pass Data to Route: Dynamic/Static RouterLink, Navigate & NavigateByUrl to Navigate Routes RouterLinkActive in Angular Angular Router Events ActivatedRoute in Angular Angular Guards Tutorial Angular CanActivate Guard Example Angular CanActivateChild Example Angular CanDeactivate Guard Angular Resolve Guard Introduction to Angular Modules or ngModule Angular Routing between modules Angular Folder Structure Best Practices Guide to Lazy loading in Angular Angular Preloading Strategy Angular CanLoad Guard Example Ng-Content & Content Projection in Angular Angular @input, @output & EventEmitter Template Reference Variable in Angular ng-container in Angular How to use ng-template & TemplateRef in Angular How to Use ngTemplateOutlet in Angular '@Hostbinding and @Hostlistener_in_Angular Understanding ViewChild, ViewChildren &erylist in Angular ElementRef in Angular Renderer2 Example: Manipulating DOM in Angular ContentChild and ContentChildren in Angular AfterViewInit, AfterViewChecked, AfterContentInit & AfterContentChecked in Angular Angular Decorators Observable in Angular using RxJs Create observable from a string, array & object in angular Create Observable from Event using FromEvent in Angular Using Angular observable pipe with example Angular Map Operator: Usage and Examples Filter Operator in Angular Observable Tap operator in Angular observable Using SwitchMap in Angular Using MergeMap in Angular Using concatMap in Angular Using ExhaustMap in Angular Take, TakeUntil, TakeWhile & TakeLast in Angular Observable First, Last & Single Operator in Angular Observable Skip, SkipUntil, SkipWhile & SkipLast Operators in Angular The Scan & Reduce operators in Angular DebounceTime & Debounce in Angular Delay & DelayWhen in Angular Using ThrowError in Angular Observable Using Catcherror Operator in Angular Observable ReTryWhen inReTry, ReTryWhen in Angular Observable Unsubscribing from an Observable in Angular Subjects in Angular ReplaySubject, BehaviorSubject & AsyncSubject in Angular Angular Observable Subject Example Sharing Data Between Components Angular Global CSS styles View Encapsulation in Angular Style binding in Angular Class Binding in Angular Angular Component Styles How to Install & Use Angular FontAwesome How to Add Bootstrap to Angular Angular Location Service: go/back/forward Angular How to use APP_INITIALIZER Angular Runtime Configuration Angular Environment Variables Error Handling in Angular Applications Angular HTTP Error Handling Angular CLI tutorial ng new in Angular CLI How to update Angular to latest version Migrate to Standalone Components in Angular Create Multiple Angular Apps in One Project Set Page Title Using Title Service Angular Example Dynamic Page Title based on Route in Angular Meta service in Angular. Add/Update Meta Tags Example Dynamic Meta Tags in Angular Angular Canonical URL Lazy Load Images in Angular Server Side Rendering Using Angular Universal The requested URL was not found on this server error in Angular Angular Examples & Sample Projects Best Resources to Learn Angular Best Angular Books in 2020

Meta service in Angular. Add/Update Meta Tags Example

Learn how to add/update HTML Meta tags using the Meta Service in Angular. The Angular Meta Service makes it easier to set different meta tags to different pages. It provides methods such as addTag(), addTags(), getTag(), getTags(), updateTag(), removeTag(), removeTagElement() etc. We can use them to manipulate meta tags. Let us find out how to use Meta service using an example.

❮ Page Title based on Route Dynamic Meta Tags ❯

Table of Contents

Why Set Meta Tags
Meta service
How to Use Meta Service

Importing Meta Service
Meta Definition Class

Adding Tags with addTag() & addTags()

Duplication of Meta tags

Reading the Tags
Update the Tag
Removing the Tag
References

Why Set Meta Tags

Meta tags describe details about your page content to search engines. Hence setting the right Meta tags is very important for SEO. These tags appear only in the <head> section of the HTML and not visible to the user. But search engines / social media sites use them to find more about your page. Meta tags in a typical <head> section might look like this

Example

Try this code »

                              
 
<head>
  <title>Setting HTML Meta Tags Angular Meta service Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name=”description” content=”Angular Meta service Example” />
  <meta name=”robots” content=”Index,follow” />
  <meta property="og:title" content="Content Title for social media">
  <meta charset="UTF-8">
</head>

Meta service

The Meta service in Angular provides the following methods to manipulate the HTML Meta tags.

How to Use Meta Service

Importing Meta Service

To use meta service, we first need to import it in the Root module. The Meta service is part of the @angular/platform-browser library as it is applicable only apps running on the browser.

Example

Try this code »

                              

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

Next, we need to register it in the Angular Providers metadata as shown below

Example

Try this code »

                              

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [Meta],
  bootstrap: [AppComponent]
})
export class AppModule { }

To make use of the service in components, all you need to do is to inject it using Dependency Injection.

Then call any of the methods of the Meta Service to manipulate the Tags. You can either use ngOnInit or constructor.

Example

Try this code »

                              
 
import { Component, OnInit } from '@angular/core';
import { Meta, MetaDefinition } from '@angular/platform-browser';
 
@Component({
  template: `<h1>Home Component</h1>`
})
export class HomeComponent implements OnInit {
  title = 'Home Component Title';
 
  constructor(private metaService:Meta){
  }
 
  ngOnInit() {
    this.metaService.addTag( { name:'description',content:"Article Description"});
  }
 
}

Meta Definition Class

Meta definition class represents a meta element.

Example

Try this code »

                              

type MetaDefinition = {
    charset?: string;
    content?: string;
    httpEquiv?: string;
    id?: string;
    itemprop?: string;
    name?: string;
    property?: string;
    scheme?: string;
    url?: string;
} & {
    [prop: string]: string;
};

The InjectionToken

We create objects of type MetaDefinition and add them using the Meta Service. For Example

Example

Try this code »

                              

{name: 'description', content: 'Title and Meta tags examples'}

and it results in the following HTML

Example

Try this code »

                              
 
<meta name=”description” content=”Setting HTML Meta Tags Angular Meta service Example” />

Similarly,

Example

Try this code »

                              
 
{charset: 'UTF-8'}                              
=>  <meta charset="UTF-8">
 
{meta name="robots" content="Index,follow"}     
====>  <meta name=”robots” content=”Index,follow” />
 
{meta name="viewport" content="width=device-width, initial-scale=1"}     
====>  <meta name="viewport" content="width=device-width, initial-scale=1">

Adding Tags with addTag() & addTags()

To add a new tag or Tags, we make use of methods addTag() or addTags().

addTag() allows us to add a single tag

Syntax

Example

Try this code »

                              

addTag(tag: MetaDefinition, forceCreation: boolean = false): HTMLMetaElement | null

Example

Example

Try this code »

                              
 
constructor(private metaService: Meta) {
    this.addTag();
}
 
addTag() {
   this.metaService.addTag({ name: 'description', content: 'Article Description' });
   this.metaService.addTag({ name: 'robots', content: 'index,follow' });
   this.metaService.addTag({ property: 'og:title', content: 'Content Title for social media' });
}

This results in the following HTML.

Example

Try this code »

                              

<meta name="description" content="Article Description">
<meta name="robots" content="index,follow">
<meta property="og:title" content="Content Title for social media">

while addTags() allows us to add more than one tag

Syntax

Example

Try this code »

                              
 
addTags(tags: MetaDefinition[], forceCreation: boolean = false): HTMLMetaElement[]

Example

Try this code »

                              
 
constructor(private metaService: Meta) {
    this.addTags();
}
  
addTags() {
   this.metaService.addTags([
     { name: 'description', content: 'Article Description' },
     { name: 'robots', content: 'index,follow' },
     { property: 'og:title', content: 'Content Title for social media' }
  ]);
}

Duplication of Meta tags

The angular does check if the meta tag already exists. If already exists, then it won’t allow you to add the meta tag. You can force it to add the tag by making the forceCreation=true

Although the angular checks for the duplicate meta tag, You should not rely on it .

The Meta tags are equal only if values of all the attributes are equal

The following code results in only one HTML meta tag in the rendered HTML

Example

Try this code »

                              

constructor(private metaService: Meta) {
    this.duplicateTags();
}
 
duplicateTags() {
  this.metaService.addTag( { name: 'description', content: 'Article Description' })
  this.metaService.addTag( { name: 'description', content: 'Article Description' })
}
 
 
//output
<meta name="description" content="Article Description">

While the following code results in both meta tags in the rendered HTML.

Example

Try this code »

                              

constructor(private metaService: Meta) {
    this.duplicateTags();
}
 
duplicateTags1() {
    this.metaService.addTag( { name: 'description', content: 'Article Description' })
    this.metaService.addTag( { name: 'description', content: 'A different Article Description' })
}
 
//output
<meta name="description" content="Article Description">
<meta name="description" content="A different Article Description">

Only the first instance is checked

While checking for duplicates, angular checks only the first instance of the meta tag. It uses either name or property to look for the first instance of the meta tag and check for duplication.

Example

Try this code »

                              
 
  duplicateTags2() {
    this.metaService.addTag( { name: 'description', content: 'Article Description' })
    this.metaService.addTag( { name: 'description', content: 'A different Article Description' })
    this.metaService.addTag( { name: 'description', content: 'Description of the Article' })   //Not Inserted
    this.metaService.addTag( { name: 'description', content: 'A different Article Description' })    //Inserted
  }
 
 
****output
<meta name="description" content="Article Description">   //Appears only once
<meta name="description" content="A different Article Description">  
<meta name="description" content="A different Article Description">  //Not checked for duplication

will result in the following HTML. Note that Angular does not duplicate the Description of the component, but generates the duplication of A different Description of the component

Reading the Tags

You can read the meta tags using the getTag() & getTags() method. getTag() reads the first instance, while getTags() reads all instances of the meta tag.

Syntax

Example

Try this code »

                              

getTag(attrSelector: string): HTMLMetaElement | null
getTags(attrSelector: string): HTMLMetaElement[]

Examples

Add the following Meta Tags.

Example

Try this code »

                              

  getTag() {
    this.metaService.addTag({ name: 'description', content: 'Article Description' });
    this.metaService.addTag({ name: 'robots', content: 'index,follow' });
    this.metaService.addTag({ property: 'og:title', content: 'Content Title for social media' });
    this.metaService.addTag({ name: 'description', content: 'Another Article Description' });
  }

The getTag() method returns the first instance of the matching meta tag. You need to pass the name of the attribute and value in the format attributeName='value'. You can search for only one attribute. Searching for Multiple attributes are not supported.

Example

Try this code »

                              
 
this.metaService.getTag("name='description'")
 
***output in console window
<meta name="description" content="Article Description">

Use it to compare any of the attributes. The following example uses the content attribute to read the data.

Example

Try this code »

                              

console.log(this.metaService.getTag("content='Article Description'"));
 
***output in console window
<meta name="description" content="Article Description">

The getTags() method returns all instances of the meta in an array

Example

Try this code »

                              

console.log(this.metaService.getTags("name='description'"));
 
 
***output
<meta name="description" content="Article Description">
<meta name="description" content="Another Article Description">

The following will return all the meta tags with the name attribute

Example

Try this code »

                              
 
console.log(this.metaService.getTags("name"));
 
***output. Returns an array of the following meta tags
<meta name="viewport" content="Article Description">
<meta name="description" content="width=device-width, initial-scale=1">
<meta name="robots" content="index,follow">
<meta name="description" content="Another Article Description">

You can also check out the following.

Example

Try this code »

                              

console.log(this.metaService.getTags("property"));
console.log(this.metaService.getTags("content"));

Update the Tag

updateTag() method updates the existing meta tags with the new one (first argument) based on search criteria. Specify the search criteria as the second argument in the form attributeName='value' similar to getTag method

Syntax

Example

Try this code »

                              
updateTag(tag: MetaDefinition, selector?: string): HTMLMetaElement | null

Example

Try this code »

                              

//Add the Tag
this.metaService.addTag({ name: 'robots', content: 'index,follow' });
 
//output
<meta name="robots" content="index, follow">
 
//Now update the Tag
this.metaService.updateTag( { name:'robots', content:'index, nofoloow'},"name='robots'");
 
//Output
<meta name="robots" content="index, nofoloow">

updateTag inserts the tag if matching meta element is not found

Example

Try this code »

                              
 
this.metaService.updateTag( { name:'description', content:'Article Description'},"name='description'");
 
//Will insert the Meta if it is not found
<meta name="description" content="Article Description">

updateTag replaces only the first instance of the search criteria.

Example

Try this code »

                              

this.metaService.addTag({ property: 'og:title', content: 'Social Media descripton'});
this.metaService.addTag({ property: 'og:title', content: 'Duplicate Social Media descripton'});
 
 
//output
<meta property="og:title" content="Social Media descripton">
<meta property="og:title" content="Duplicate Social Media descripton">
 
//Now run this
this.metaService.updateTag( { property:'og:title', content:Social Media 'Description of the component'},"property='og:title'");
 
//output
<meta property="og:title" content="Description of the componen">     //Updated
<meta property="og:title" content="Duplicate Social Media descripton">  //Not touched

Removing the Tag

Use removeTag() or removeTagElement() element to remove the meta tag.

Syntax

Example

Try this code »

                              
 
removeTag(attrSelector: string): void
removeTagElement(meta: HTMLMetaElement): void

The following example adds the robots metatag and then uses the removeTag to remove it. removeTag removes the first instance of the matching meta tag. You need to pass the name of the attribute and value in the format attributeName='value'. You can search using only one attribute.

Example

Example

Try this code »

                              

//Adding the Meta Tag
this.metaService.addTag({ name: 'robots', content: 'index,follow' });
 
//Output
<meta name="robots" content="index,follow">
 
//Remove it 
this.metaService.removeTag("name='robots'");

Removes the first matching tag.

Example

Try this code »

                              
 
//Adds tow meta tags
this.metaService.addTag({ property: 'og:title', content: 'Social Media descripton'});
this.metaService.addTag({ property: 'og:title', content: 'Duplicate Social Media descripton'});
 
//This will remove the first one
this.metaService.removeTag("property='og:title'");

You can use any attribute of the meta. The following example uses the content attribute to remove it.

Example

Try this code »

                              
 
//Adds the meta tag
this.metaService.addTag({ property: 'og:title', content: 'Duplicate Social Media descripton'});
 
//Output
<meta property="og:title" content="Duplicate Social Media descripton">
 
//This will remove it
this.metaService.removeTag("content='Duplicate Social Media descripton'");

You can also use removeTagElement() to remove the meta. You need to pass the HTMLMetaElement , which you want to remove. For example,

Example

Try this code »

                              
 
//Ads two meta property
this.metaService.addTag({ property: 'og:title', content: 'Social Media descripton'});
this.metaService.addTag({ property: 'og:title', content: 'Duplicate Social Media descripton'});
 
//Removes the first instance of the 'og:title'
this.metaService.removeTagElement(this.metaService.getTag('property'));

References

❮ Page Title based on Route Dynamic Meta Tags ❯

Is this website helpful to you? Please give us a like, or share your feedback to help us improve. Connect with us on Facebook and Twitter for the latest updates.

Copyright © 2022 Tutorial Hub Tutorial. All Rights Reserved.