title: Angular 5 Insert dynamic input attributes
body: <p>I want to insert dynamically attributes to an input html tag, but I don't know to to do this:</p>
  
  <p>I've got this code from component side:</p>
  
  <pre><code>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]}`);
        }
      }
    }
  }
  </code></pre>
  
  <p>And this is my template side:</p>
  
  <pre><code>&lt;input  type="text"
          [attr.name]="elements.name"
          [attr.value]="elements.value"
          [attr.placeholder]="elements.placeholder"
          [attr.maxlength]="elements.maxlength"/&gt;
  </code></pre>
  
  <p>I want any 'forin' like  method to iterate over each elements attribute and insert dynamically on the input tag, so it results like this:</p>
  
  <pre><code>&lt;input type="text"
         [attr.*for="el in elements"]="el"/&gt;
  </code></pre>
  
  <p>How can I implement this?</p>
  
  <p>Best Regards
  Antonio</p>