Angular Js 2 not loading the jquery query builder internal script files -

my requirement

need load jquery query builder inside modal using angularjs 2 typescript

what have done

i have created dynamic forms in angularjs 2 contains 3 select box , 1 text box, in text box on-click of have called bootstrap modal inside modal body have coded query builder , created internal java script query builder inside template_rule.html

whats happening

when click text box modal pop happening , inside modal body 3 buttons rendering , main query builder view in not rendering.

this working demo link(http://plnkr.co/edit/d38iwjlhjztjm5t46zd7?p=preview)

demo link functionality

in link there button in top left corner click keep on adding set of fields, in set of fields there text box if click text box modal pop up, in rendering query builder, buttons showing core functionality part not showing in modal pop up, query builder script in app/template_rule.html file , necessary libraries included in index.html file, please me resolve this

this part of code full working code please refer link above

import {component} 'angular2/core'; import {         form_directives, formbuilder, controlgroup, controlarray, validators, ngform, control,             abstractcontrol     }from 'angular2/common';  @component({ selector: 'my-app', templateurl:'app/template_rule.html', directives: [form_directives] }) export class appcomponent { userform: controlgroup; constructor(private fb: formbuilder) { this.userform = fb.group({   rules_list:  new controlarray([])     });     this.rules_list();  }   rules_list(){     this.userform.controls['rules_list'].push(this.fb.group({         select_state: this.fb.control("",validators.required),         rules: this.fb.control("", validators.required),         pass_state: this.fb.control("", validators.required),         fail_state: this.fb.control("", validators.required)     })); }  removerules(ctrl) {      let ruleslists = (<array>(<controlgroup>this.userform.controls['rules_list']).controls);     for(var = 0; < ruleslists.length; i++) {          console.log("each rules", ctrl);         if(ruleslists[i] == ctrl) {          console.log("rules remove", ruleslists[i]);             ruleslists.splice(i, 1);             (<controlgroup>this.userform.controls['rules_list']).updatevalueandvalidity();          break;         }     } }  submitrules() {      console.log(this.userform.value)     } } 

solved issue loading query builder script file dynamically in angular 2 when template loads

below code load dynamically

load_script(){ var head=document.getelementbytagname('head')[0]; var script=document.createelement('script'); script.type='text/javascript'; script.src='js file url' head.appendchild(script); }