Adding script dynamically to <head> in Angular

Question

I've checked some example that demonstrate how to add script with URL dynamically in Angular

But I want to add this kind of stuff to <head>

<script>
  !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
  n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
  document,'script','https://connect.facebook.net/en_US/fbevents.js');

  fbq('init', '<FB_PIXEL_ID>');
  fbq('track', "PageView");
</script>

or

  <noscript>something</noscript>

or both.

Any ideas, examples?

Does this answer your question? Adding script script dinamicaly to <head> in Angular — StPaulis
– StPaulis, Commented Nov 3, 2020 at 8:36

griFlo · Accepted Answer · 2020-11-17 11:44:57Z

8

+50

You can make an function, which gets the (first) head tag from the document and add an created script tag (with the code you specify in innerHTML) before the first child of the head tag:

export function addScriptsToHead() {
  const head = document.getElementsByTagName('head')[0];

   
  const script = document.createElement('script');
  script.innerHTML = 'your code';

  head.insertBefore(script, head.firstChild);
}

edited Nov 17, 2020 at 11:44

answered Nov 16, 2020 at 13:44

griFlo

2,17420 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Codemaker2015 · Accepted Answer · 2020-11-16 14:30:45Z

You can simply get the reference of an element using getElementByTagName() method by passing the tag name. After that you have to create a script variable then insert code to the variable using innerHTML attribute. Finally insert the script variable into head.

Try the following code,

  const head = document.getElementsByTagName('head')[0];
  const script = document.createElement('script');
  script.innerHTML = 'your code';
  head.insertBefore(script, head.firstChild);

Shy Agam · Accepted Answer · 2021-03-24 18:14:56Z

If you can allow yourself to install a new library, use the HeadService that comes with @bespunky/angular-zen. It provides a safe and strongly-typed access to the head element.

Your component / service would look something like this:

 import { Component, OnInit } from '@angular/core';
 import { HeadService       } from '@bespunky/angular-zen/core';

 @Component({
     selector   : 'zen-head-service-demo',
     templateUrl: './head-service-demo.component.html',
     styleUrls  : ['./head-service-demo.component.css']
 })
 export class HeadServiceDemoComponent implements OnInit
 {
     constructor(private head: HeadService) { }

     ngOnInit()
     {
         this.head.addElement('script', /* config object or config function */);
     }
 }

Live examples | Service docs | Service API

🙋‍♂️ Remember to npm install @bespunky/angular-zen and import CoreModule from the /core package.

TLDR

💡 The HeadService has other cool features like looking up elements by attributes, support for well known elements (e.g. scripts and styles), etc.

💡 It's also testing-ready, meaning you can easily mock the document element or spy on it.

Marco Bertelli · Accepted Answer · 2020-11-03 09:28:14Z

-6

here my example that i actually use in my project :

<head>
    <div *ngIf="dati">
        <title>{{dati.data.field_meta_tag.description}}</title>
    </div>
</head>

for do this you need to use rjxs operator and take the response to your api,in my example i use it only for the title now but you can use it for all.

answered Nov 3, 2020 at 9:28

Marco Bertelli

4354 silver badges11 bronze badges

Collectives™ on Stack Overflow

Adding script dynamically to <head> in Angular

4 Answers 4

Comments

Comments

TLDR

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

TLDR

Comments

Comments

Linked

Related