Angular Elements cannot bind value with curly brackets

Question

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>

Looks like your variable `fileOne` is null. Your code works fine in StackBlitz, see [here](https://stackblitz.com/edit/angular-ivy-p6rgnm?file=src/app/app.component.html). — ViqMontana, Sep 14 '20 at 14:12

score 0 · Accepted Answer · answered Sep 14 '20 at 14:21

0

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>

answered Sep 14 '20 at 14:21

Tschareck

4,071
9
47
74

score -1 · Answer 2 · answered Sep 14 '20 at 15:06

Try like this in Ts

   @Input() inputFileID: string;
   fileId:any;

 ngOnInit() {
  if (this.inputFileID && this.inputFileID!=null) {
     this.fileId = this.inputFileID;
   }
}

in Html File

<label for="{{fileId}}" class="filedrop__uploadlabel"> Upload file </label>

Angular Elements cannot bind value with curly brackets

2 Answers2