12

I'm pretty stuck and don't know how to solve my problem...

Simplified: I have a component that creates a ulist based on a binding, like this:

@Component({
   selector: "template",
   template: `
     <ul>
       <li *ng-for="#challenge of jobs.challenges">{{challenge}}</li>
     </ul>
   `})
export class JobTemplate{
  jobs: Jobs;
  constructor(jobs:Jobs){
    this.jobs = jobs
  }     
}

The component selector/host is embedded in normal html flow echoed by php and is used to replace a predefined ulist. The problem is that on the normal site, a script tag after the ulist was used to apply some jquery magic on the list.

Since the script tag is echoed out before the template of my component has finished loading, the jquery calls won't find the elements of my template DOM. Putting the script tag inside my template (at the end) does not work; it simply seems to get ignored.

<ul>
  <a><li *ng-for="#challenge of jobs.challenges">{{challenge}}</li></a>  
</ul>
<script>
   $("ul a").on("click", function (event)
        {
        var parent = $(this).parent();
        if(parent.hasClass('active'))
          ....slideToggle("normal");
        else
        ....
        });
</script>

Also the site uses the foundation framework, and each time a new element is added to the page (e.g through the binding of my component being updated externally) I need to call $(document).foundation().

So my question is, how can I achieve to call jquery on my template DOM, when I don't know if my template has finished being created. The onload handler doesn't work either when defined in my component template.

I have read about AfterViewInit, but I'm kind of overwhelmed with it. Could someone please push me in the right direction?

How can I find out when the template of my component has been fully inserted into the "main" DOM?

Sebas
  • 21,192
  • 9
  • 55
  • 109
ch40s
  • 580
  • 1
  • 7
  • 19
  • 2
    According to [API docs](https://angular.io/docs/ts/latest/api/core/AfterViewInit-interface.html) for AfterViewInit, you can try adding method ngAfterViewInit() to your component and calling the jQuery code there. – Mark Rajcok Dec 07 '15 at 20:46
  • @MarkRajcok +1. OP note that you'll have to implement `AfterViewInit`. Also note that you *really* want to avoid using jQuery (in favor of using templating and data-binding solutions) unless absolutely necessary in angular2 – drew moore Dec 07 '15 at 22:27
  • Neither `AfterViewInit` nor `AfterContentInit` fire when my template is completely loaded (how could it, the template is bound to source that gets delivered async). I settled with creating the handlers in the template itself, with `#a (click)="addHandler(a)"`, and used `AfterViewChecked` to apply `jQuery(document).foundation()` when bindings have changed. Thanks! – ch40s Dec 08 '15 at 09:10

2 Answers2

23

Script tags in component templates are removed. A workaround is to create the script tag dynamically in ngAfterViewInit()

See also https://github.com/angular/angular/issues/4903

constructor(private elementRef:ElementRef) {};

ngAfterViewInit() {
  var s = document.createElement("script");
  s.type = "text/javascript";
  s.src = "http://somedomain.com/somescript";
  this.elementRef.nativeElement.appendChild(s);
}

See also https://stackoverflow.com/a/9413803/217408

A better way might be to just use require() to load the script.

See also script tag in angular2 template / hook when template dom is loaded

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thanks for that. When i posted i just started out with angular, and i totally used the wrong approach. It was just about adding click handlers to template elements, which of course is way more comfortable just using angular2's template syntax, in this case ``. – ch40s Feb 23 '16 at 11:44
  • Sure, it's best to not use external scripts at all :) – Günter Zöchbauer Feb 23 '16 at 11:45
8

I encountered the same issue, but additionally I had to load in a number of scripts, some of which could loaded in parallel, and others in series. This solution will work if you are using TypeScript 2.1 or greater, which has native support for async/await and transpiles to ES3/ES5:

async ngAfterViewInit() {
  await this.loadScript("http://sub.domain.tld/first-script.js")
  await this.loadScript("http://sub.domain.tld/second-script.js")
}

private loadScript(scriptUrl: string) {
  return new Promise((resolve, reject) => {
    const scriptElement = document.createElement('script')
    scriptElement.src = scriptUrl
    scriptElement.onload = resolve
    document.body.appendChild(scriptElement)
  })
}

For any scripts that can be loaded in parallel, you can take advantage of Promise.all:

async ngAfterViewInit() {
  await Promise.all([
    this.loadScript("http://sub.domain.tld/first-parallel.js"),
    this.loadScript("http://sub.domain.tld/second-parallel.js")
  ])
  await this.loadScript("http://sub.domain.tld/after-parallel.js")
}

Note: For promise rejection, you can try working with scriptElement.onerror = reject in the loadScript() function, however, I encountered some quirky behavior in this situation. If you want script to keep loading no matter what, you may want to experiment with resolving promises when onerror is called.

Andrew Odri
  • 8,868
  • 5
  • 46
  • 55