4

I want to implement a directive called "upload-file" that would be applied on a <button> element. Its usage would be:

<button upload-file> Upload a file </button>

The directive should add a hidden <input> and when the button is clicked the <input> element will be clicked by the directive code. The resulting DOM would be:

<button upload-file>Upload a file</button>
<input type="file" #uploaderInputEl ng2FileSelect [uploader]="uploader" />

I try to create the <input> element using Renderer2 this way:

  private appendInputElement = () => {
    this.inputElement = this._renderer.createElement('input');

    this._renderer.setAttribute(this.inputElement, "type", "file");
    this._renderer.setStyle(this.inputElement, "width", "0");
    this._renderer.setStyle(this.inputElement, "visibility", "hidden");

    this._renderer.setAttribute(this.inputElement, "accept", this.acceptedFileExtensions);
    this._renderer.listen(this.inputElement, "change", (event) => this.inputElement_change(event));

    // set directive: ng2FileSelect
    // set property binding: [uploader]="uploader"

    this._renderer.appendChild(this.containerElement, this.inputElement);
  }

But I don't know how to set the directive (ng2FileSelect) and property binding ([uploader]="uploader"). I know that they are "angular functionality" same as 'event binding' (change) which I set using _renderer.listen().

Is there a way to set directive and property-binding?

Nicolae Daian
  • 1,065
  • 3
  • 18
  • 39

1 Answers1

1

Unfortunately, angular not provide to set directive dynamically from the code

DMITRYTISHKIN
  • 506
  • 2
  • 11