Angular component input with dynamic id and name not working

I have the following list of components, which take an id and label value as properties.

<ul>
<li>
<btn-attatch
id="one"
label="label1"
(file)="specialFileType($event)"
>
</btn-attatch>
</li>
<li>
<btn-attatch
id="two"
label="label2"
(file)="specialFileType($event)"
>
</btn-attatch>
<li>
</ul>


Inside my component I set the following template and values accordingly:

<input
type="file"
[attr.name]="id"
[attr.id]="id"
(change)="fileChange($event.target.files)"
class="inputfile"
/>
<label *ngIf="!fileName" [attr.for]="id">{{ label }}</label>


private _id: string;
@Input() set id(s: string) {
this._id = s;
}
get id() {
return this._id;
}

private _label: string;
@Input() set label(s: string) {
this._label = s;
}
get label() {
return this._label;
}


My issue is that when i am setting fixed values in the input and label inside the component , as opposed to sending in those values via @Input, everything works. Once I try to dynamicaly set the id and labels via @Input, the input becomes unclickable.

Continue reading...