{"id":91,"date":"2018-10-12T22:22:42","date_gmt":"2018-10-12T20:22:42","guid":{"rendered":"http:\/\/galtalmor.com\/blog\/?p=91"},"modified":"2018-10-13T06:01:01","modified_gmt":"2018-10-13T04:01:01","slug":"adding-a-script-tag-in-angular-inside-a-specific-component","status":"publish","type":"post","link":"https:\/\/galtalmor.com\/blog\/?p=91","title":{"rendered":"Adding a script tag in Angular inside a specific component"},"content":{"rendered":"\n<p>In one of my latest projects I stumbled upon the need to run an external script, or basically have a &lt;script> tag, in one specific component, more specifically a routed component or a page if you will.<\/p>\n\n\n\n<p>The scenario I&#8217;m talking about was due to the requirement of informing Google Ads Conversion Tracking (GACT) in a registration form written in Angular.<\/p>\n\n\n\n<p>For obvious reasons, I did not want to load GACT script on all of my Angular application pages, therefor I did not want to put it in my index.html file, but when that&#8217;s the case, for security reasons, Angular will not let you just add a &lt;script> tag in your template.<\/p>\n\n\n\n<p>We had to think of a solution&#8230;<\/p>\n\n\n\n<p>After some thinking and research we found the following solution to the problem: have a special component, let&#8217;s call it the cool name &#8220;ScriptHackComponent&#8221; which will load a script tag to the head of the page whenever we use the\u00a0tag &lt;app-script-hack>, which basically mimics a standard HTML &lt;script> tag. And yes, Stackoverflow\u00a0helped with the solution, but we perfected it a little bit more.<\/p>\n\n\n\n<p>The component we&#8217;ve added ended up looking like this:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><pre class=\"brush: xml; title: scripthack.component.html; notranslate\" title=\"scripthack.component.html\">\n&lt;div #script=&quot;&quot; style.display=&quot;none&quot;&gt;\n    &lt;ng-content&gt;&lt;\/ng-content&gt;\n&lt;\/div&gt;\n<\/pre><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><pre class=\"brush: jscript; title: scripthack.component.ts; notranslate\" title=\"scripthack.component.ts\">\nimport { isPlatformBrowser } from '@angular\/common';\nimport { AfterViewInit, Component, ElementRef, Inject, Input, PLATFORM_ID, ViewChild } from '@angular\/core';\n\n@Component({\n    selector: 'app-script-hack',\n    templateUrl: '.\/scripthack.component.html'\n})\nexport class ScriptHackComponent implements AfterViewInit {\n    @Input()\n    src: string;\n\n    @Input()\n    type: string;\n\n    @ViewChild('script') script: ElementRef;\n\n    constructor(@Inject(PLATFORM_ID) private platformId: Object) {\n    }\n\n    convertToScript() {\n        const element = this.script.nativeElement;\n        const parent = element.parentElement;\n        const script = document.createElement('script');\n        script.type = this.type ? this.type : 'text\/javascript';\n        if (this.src) {\n            script.src = this.src;\n        }\n\n        if (element.innerHTML) {\n            script.innerHTML = element.innerHTML;\n        }\n\n        parent.parentElement.replaceChild(script, parent);\n    }\n\n    ngAfterViewInit() {\n        if (isPlatformBrowser(this.platformId)) {\n            this.convertToScript();\n        }\n    }\n}\n<\/pre><\/pre>\n\n\n\n<p>After creating this component we could have used it just like a standard &lt;script> tag, but with the name change &lt;app-script-hack>, like this.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;app-script-hack type=&quot;text\/javascript&quot; src=&quot;path_to_external_script.js&quot;&gt;\n&lt;\/app-script-hack&gt;\n<\/pre><\/pre>\n\n\n\n<p>Just a very important note, make sure you never let any unsafe code be compiled by the Angular engine with this tag, that might let your users create unsafe &#8220;reflection&#8221; code which can hurt other users by running harmless JavaScript scripts from and external source.<\/p>\n\n\n\n<p>I hope that was helpful for you.<\/p>\n\n\n\n<p>Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In one of my latest projects I stumbled upon the need to run an external script, or basically have a &lt;script> tag, in one specific component, more specifically a routed component or a page if you will. The scenario I&#8217;m&#8230;<\/p>\n","protected":false},"author":1,"featured_media":92,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-91","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Adding a script tag in Angular inside a specific component - Gal&#039;s Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/galtalmor.com\/blog\/?p=91\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding a script tag in Angular inside a specific component - Gal&#039;s Blog\" \/>\n<meta property=\"og:description\" content=\"In one of my latest projects I stumbled upon the need to run an external script, or basically have a &lt;script&gt; tag, in one specific component, more specifically a routed component or a page if you will. The scenario I&#8217;m...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/galtalmor.com\/blog\/?p=91\" \/>\n<meta property=\"og:site_name\" content=\"Gal&#039;s Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/galtalmor\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-12T20:22:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-10-13T04:01:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/galtalmor.com\/blog\/wp-content\/uploads\/2018\/10\/christopher-robin-ebbinghaus-681475-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"4272\" \/>\n\t<meta property=\"og:image:height\" content=\"2848\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"galtalmor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@galtalmor\" \/>\n<meta name=\"twitter:site\" content=\"@galtalmor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"galtalmor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/galtalmor.com\/blog\/?p=91#article\",\"isPartOf\":{\"@id\":\"https:\/\/galtalmor.com\/blog\/?p=91\"},\"author\":{\"name\":\"galtalmor\",\"@id\":\"https:\/\/galtalmor.com\/blog\/#\/schema\/person\/ba0304e98667aa0165abe7c766780b3d\"},\"headline\":\"Adding a script tag in Angular inside a specific component\",\"datePublished\":\"2018-10-12T20:22:42+00:00\",\"dateModified\":\"2018-10-13T04:01:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/galtalmor.com\/blog\/?p=91\"},\"wordCount\":287,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/galtalmor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/galtalmor.com\/blog\/?p=91#primaryimage\"},\"thumbnailUrl\":\"https:\/\/galtalmor.com\/blog\/wp-content\/uploads\/2018\/10\/christopher-robin-ebbinghaus-681475-unsplash.jpg\",\"articleSection\":[\"Code\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/galtalmor.com\/blog\/?p=91#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/galtalmor.com\/blog\/?p=91\",\"url\":\"https:\/\/galtalmor.com\/blog\/?p=91\",\"name\":\"Adding a script tag in Angular inside a specific component - Gal&#039;s Blog\",\"isPartOf\":{\"@id\":\"https:\/\/galtalmor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/galtalmor.com\/blog\/?p=91#primaryimage\"},\"image\":{\"@id\":\"https:\/\/galtalmor.com\/blog\/?p=91#primaryimage\"},\"thumbnailUrl\":\"https:\/\/galtalmor.com\/blog\/wp-content\/uploads\/2018\/10\/christopher-robin-ebbinghaus-681475-unsplash.jpg\",\"datePublished\":\"2018-10-12T20:22:42+00:00\",\"dateModified\":\"2018-10-13T04:01:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/galtalmor.com\/blog\/?p=91#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/galtalmor.com\/blog\/?p=91\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/galtalmor.com\/blog\/?p=91#primaryimage\",\"url\":\"https:\/\/galtalmor.com\/blog\/wp-content\/uploads\/2018\/10\/christopher-robin-ebbinghaus-681475-unsplash.jpg\",\"contentUrl\":\"https:\/\/galtalmor.com\/blog\/wp-content\/uploads\/2018\/10\/christopher-robin-ebbinghaus-681475-unsplash.jpg\",\"width\":4272,\"height\":2848},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/galtalmor.com\/blog\/?p=91#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/galtalmor.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding a script tag in Angular inside a specific component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/galtalmor.com\/blog\/#website\",\"url\":\"https:\/\/galtalmor.com\/blog\/\",\"name\":\"Gal&#039;s Blog\",\"description\":\"Web developer, gamer, DJ and a computer geek in general.\",\"publisher\":{\"@id\":\"https:\/\/galtalmor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/galtalmor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/galtalmor.com\/blog\/#organization\",\"name\":\"Gal's Blog\",\"url\":\"https:\/\/galtalmor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/galtalmor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/galtalmor.com\/blog\/wp-content\/uploads\/2015\/03\/860943_10151310903518946_1561965836_o-1.jpg\",\"contentUrl\":\"http:\/\/galtalmor.com\/blog\/wp-content\/uploads\/2015\/03\/860943_10151310903518946_1561965836_o-1.jpg\",\"width\":1354,\"height\":900,\"caption\":\"Gal's Blog\"},\"image\":{\"@id\":\"https:\/\/galtalmor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/galtalmor\",\"https:\/\/x.com\/galtalmor\",\"https:\/\/www.linkedin.com\/in\/galtalmor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/galtalmor.com\/blog\/#\/schema\/person\/ba0304e98667aa0165abe7c766780b3d\",\"name\":\"galtalmor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/galtalmor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f2ff78ce23611579e3eafe9c98a2a277?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f2ff78ce23611579e3eafe9c98a2a277?s=96&d=mm&r=g\",\"caption\":\"galtalmor\"},\"url\":\"https:\/\/galtalmor.com\/blog\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding a script tag in Angular inside a specific component - Gal&#039;s Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/galtalmor.com\/blog\/?p=91","og_locale":"en_US","og_type":"article","og_title":"Adding a script tag in Angular inside a specific component - Gal&#039;s Blog","og_description":"In one of my latest projects I stumbled upon the need to run an external script, or basically have a &lt;script> tag, in one specific component, more specifically a routed component or a page if you will. The scenario I&#8217;m...","og_url":"https:\/\/galtalmor.com\/blog\/?p=91","og_site_name":"Gal&#039;s Blog","article_publisher":"https:\/\/www.facebook.com\/galtalmor","article_published_time":"2018-10-12T20:22:42+00:00","article_modified_time":"2018-10-13T04:01:01+00:00","og_image":[{"width":4272,"height":2848,"url":"https:\/\/galtalmor.com\/blog\/wp-content\/uploads\/2018\/10\/christopher-robin-ebbinghaus-681475-unsplash.jpg","type":"image\/jpeg"}],"author":"galtalmor","twitter_card":"summary_large_image","twitter_creator":"@galtalmor","twitter_site":"@galtalmor","twitter_misc":{"Written by":"galtalmor","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/galtalmor.com\/blog\/?p=91#article","isPartOf":{"@id":"https:\/\/galtalmor.com\/blog\/?p=91"},"author":{"name":"galtalmor","@id":"https:\/\/galtalmor.com\/blog\/#\/schema\/person\/ba0304e98667aa0165abe7c766780b3d"},"headline":"Adding a script tag in Angular inside a specific component","datePublished":"2018-10-12T20:22:42+00:00","dateModified":"2018-10-13T04:01:01+00:00","mainEntityOfPage":{"@id":"https:\/\/galtalmor.com\/blog\/?p=91"},"wordCount":287,"commentCount":4,"publisher":{"@id":"https:\/\/galtalmor.com\/blog\/#organization"},"image":{"@id":"https:\/\/galtalmor.com\/blog\/?p=91#primaryimage"},"thumbnailUrl":"https:\/\/galtalmor.com\/blog\/wp-content\/uploads\/2018\/10\/christopher-robin-ebbinghaus-681475-unsplash.jpg","articleSection":["Code"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/galtalmor.com\/blog\/?p=91#respond"]}]},{"@type":"WebPage","@id":"https:\/\/galtalmor.com\/blog\/?p=91","url":"https:\/\/galtalmor.com\/blog\/?p=91","name":"Adding a script tag in Angular inside a specific component - Gal&#039;s Blog","isPartOf":{"@id":"https:\/\/galtalmor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/galtalmor.com\/blog\/?p=91#primaryimage"},"image":{"@id":"https:\/\/galtalmor.com\/blog\/?p=91#primaryimage"},"thumbnailUrl":"https:\/\/galtalmor.com\/blog\/wp-content\/uploads\/2018\/10\/christopher-robin-ebbinghaus-681475-unsplash.jpg","datePublished":"2018-10-12T20:22:42+00:00","dateModified":"2018-10-13T04:01:01+00:00","breadcrumb":{"@id":"https:\/\/galtalmor.com\/blog\/?p=91#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/galtalmor.com\/blog\/?p=91"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/galtalmor.com\/blog\/?p=91#primaryimage","url":"https:\/\/galtalmor.com\/blog\/wp-content\/uploads\/2018\/10\/christopher-robin-ebbinghaus-681475-unsplash.jpg","contentUrl":"https:\/\/galtalmor.com\/blog\/wp-content\/uploads\/2018\/10\/christopher-robin-ebbinghaus-681475-unsplash.jpg","width":4272,"height":2848},{"@type":"BreadcrumbList","@id":"https:\/\/galtalmor.com\/blog\/?p=91#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/galtalmor.com\/blog"},{"@type":"ListItem","position":2,"name":"Adding a script tag in Angular inside a specific component"}]},{"@type":"WebSite","@id":"https:\/\/galtalmor.com\/blog\/#website","url":"https:\/\/galtalmor.com\/blog\/","name":"Gal&#039;s Blog","description":"Web developer, gamer, DJ and a computer geek in general.","publisher":{"@id":"https:\/\/galtalmor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/galtalmor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/galtalmor.com\/blog\/#organization","name":"Gal's Blog","url":"https:\/\/galtalmor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/galtalmor.com\/blog\/#\/schema\/logo\/image\/","url":"http:\/\/galtalmor.com\/blog\/wp-content\/uploads\/2015\/03\/860943_10151310903518946_1561965836_o-1.jpg","contentUrl":"http:\/\/galtalmor.com\/blog\/wp-content\/uploads\/2015\/03\/860943_10151310903518946_1561965836_o-1.jpg","width":1354,"height":900,"caption":"Gal's Blog"},"image":{"@id":"https:\/\/galtalmor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/galtalmor","https:\/\/x.com\/galtalmor","https:\/\/www.linkedin.com\/in\/galtalmor"]},{"@type":"Person","@id":"https:\/\/galtalmor.com\/blog\/#\/schema\/person\/ba0304e98667aa0165abe7c766780b3d","name":"galtalmor","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/galtalmor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f2ff78ce23611579e3eafe9c98a2a277?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f2ff78ce23611579e3eafe9c98a2a277?s=96&d=mm&r=g","caption":"galtalmor"},"url":"https:\/\/galtalmor.com\/blog\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/galtalmor.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/91"}],"collection":[{"href":"https:\/\/galtalmor.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/galtalmor.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/galtalmor.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/galtalmor.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=91"}],"version-history":[{"count":10,"href":"https:\/\/galtalmor.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/91\/revisions"}],"predecessor-version":[{"id":103,"href":"https:\/\/galtalmor.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/91\/revisions\/103"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/galtalmor.com\/blog\/index.php?rest_route=\/wp\/v2\/media\/92"}],"wp:attachment":[{"href":"https:\/\/galtalmor.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=91"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/galtalmor.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=91"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/galtalmor.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=91"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}