angular - Angular2 Form works in Index.html but does not work in component.html -

why upload file form example working in index.html , not work in component.html file?

if move component.html clicking add file not open browse dialog.

  <form id="upload" method="post" action="upload.php" enctype="multipart/form-data">         <div id="drop">                 <a>add file</a> drag , drop                 <input type="file" name="upl" />         </div>          <ul id="uploadlist"></ul>   </form> 

---

edit: must mention import js files in index.html, , i'm not importing in system.js or angular-cli.build.js

in index.html 1 of references is:

<script src="assets/js/uploadscript.js"></script> 

and code uploadscript.js should open browser dialog:

$('#drop a').click(function(){     $(this).parent().find('input').click(); }); 

your code in uploadscript.js (i guess) initialized when dom ready, thats basic how jquery initialization works. since component not yet in dom, nothing found.

you need put initialization code directly component, called @ correct time, when form rendered in dom.

try change component this:

import { component, elementref } '@angular/core';  // reference jquery declare var $: any;  @component({     selector: 'my-component',     template: `  <form id="upload" method="post" action="upload.php" enctype="multipart/form-data">     <div id="drop">         <a (click)="addfile()">add file</a> drag , drop         <input type="file" name="upl" />     </div>      <ul id="uploadlist"></ul> </form>  ` }) export class jquerycomponent {     // elementref     constructor(private _elref: elementref)     {     }      public addfile(): void     {         $(this._elref.nativeelement).find('#drop a').parent().find('input').click();     } } 

the important part use angular 2 (click) bound directly add file anchor. elementref provides reference html dom element, can used simulate actual click event on input type="file"