Search code examples
angularcustom-elementangular-elements

Angular Elements cannot bind value with curly brackets

I want to export Angular component as custom web component. My component has input:

@Input() inputFileID: string;

which is used to bind to properties in HTML:

<input type="file" name="{{inputFileID}}" id="{{inputFileID}}" 
      (change)="onFileDrop($event)" class="filedrop__uploadtext" />
<label for="{{inputFileID}}" class="filedrop__uploadlabel"> Upload file </label>

Unfortunately inputFileID seems to be empty. I dropped this custom element in index.html like this:

<custom-file-drop-element inputFileID="fileOne"></custom-file-drop-element>

and in inspect mode I see that this was rendered:

<input type="file" class="filedrop__uploadtext" name="" id="">
<label class="filedrop__uploadlabel" for=""> Upload file </label></div>
Solution

  • In Angular Elements attributes need to be small case with dashes, instead of camel case. In this case, custom element should be something like this:

    <custom-file-drop-element input-file-id="fileOne"></custom-file-drop-element>