Is there a way to dynamically add attributes to an input HTML element in Angular?
This is the code from my component:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-transclusion',
templateUrl: './transclusion.component.html',
styleUrls: ['./transclusion.component.css']
})
export class TransclusionComponent implements OnInit {
elements: any;
constructor() { }
ngOnInit() {
this.elements = {};
this.elements.name = 'TEST1';
this.elements.type = 'text';
this.elements.value = '12';
this.elements.placeholder = 'PRUEBA';
this.elements.maxlength = '10';
// This is only for test elements keys
for (const el in this.elements) {
if (this.elements.hasOwnProperty(el)) {
console.log(`${el}: ${this.elements[el]}`);
}
}
}
}
And here is my template:
<input type="text"
[attr.name]="elements.name"
[attr.value]="elements.value"
[attr.placeholder]="elements.placeholder"
[attr.maxlength]="elements.maxlength"/>
I am looking for a way to iterate over each attribute dynamically and insert it into the input tag like this:
<input type="text"
[attr.*for="el in elements"]="el"/>
Do you have any suggestions on how I can achieve this?
Sincerely, Antonio