Need to insert Script tag in angular 2

by

Having scripts in your views is usually a bad practice. If you insist on doing this you can use this component:

scripthack.component.html:

<div #script style.display="none">
  <ng-content></ng-content>
</div>

scripthack.component.ts:

import { Component, ElementRef, ViewChild, Input } from '@angular/core';

@Component({
    selector: 'script-hack',
    templateUrl: './scripthack.component.html'
})
export class ScriptHackComponent {

    @Input()
    src: string;

    @Input()
    type: string;

    @ViewChild('script') script: ElementRef;

    convertToScript() {
        var element = this.script.nativeElement;
        var script = document.createElement("script");
        script.type = this.type ? this.type : "text/javascript";
        if (this.src) {
            script.src = this.src;
        }
        if (element.innerHTML) {
            script.innerHTML = element.innerHTML;
        }
        var parent = element.parentElement;
        parent.parentElement.replaceChild(script, parent);
    }

    ngAfterViewInit() {
        this.convertToScript();
    }
}

usage (inline):

<script-hack>alert('hoi');</script-hack>

usage (external):

<script-hack src="https://platform.twitter.com/widgets.js" type="text/javascript"></script-hack>

More Related Contents:

  1. How do I create a singleton service in Angular 2?
  2. How to communicate between component in Angular?
  3. Angular 4.3 – HttpClient set params
  4. How can I limit ngFor repeat to some number of items in Angular?
  5. Remove/replace a component’s selector tag from HTML [duplicate]
  6. Apply a directive conditionally
  7. How can I unit test a component that uses the Router in Angular?
  8. Angular 2, DomSanitizer, bypassSecurityTrustHtml, SVG
  9. Angular 2 Routing run in new tab
  10. How to implement SignIn with Google in Angular 2 using Typescript
  11. error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class
  12. Best way to “flatten” an array inside an RxJS Observable
  13. Use nav.push with side menu in ionic 2
  14. ERROR Error: No value accessor for form control with unspecified name attribute on switch
  15. How to make an http call every 2 minutes with RXJS?
  16. View is not updated on change in Angular2
  17. Debug & Run Angular2 Typescript with Visual Studio Code?
  18. How to specify locale thousand separator for number pipe in Angular 4
  19. Parameter in to Animation Angular2
  20. Angular – two subscriptions in ngOnInit result in object ‘undefined’
  21. Do I have to unsubscribe from ActivatedRoute (e.g. params) observables?
  22. Render content between the component tags
  23. FormBuilder group is deprecated
  24. What is the difference between @Inject vs constructor injection as normal parameter in Angular 2?
  25. @angular/material/index.d.ts’ is not a module
  26. What is pipe for in RxJS?
  27. How to throw error from RxJS map operator (angular)
  28. Angular2 ngModel inside ngFor (Data not binding on input)
  29. How to generate components in a specific folder with Angular CLI?
  30. What are all the index.ts used for?

Leave a Comment