title: Proper way to add attribute to custom Angular 2 component
body: <p>We have a custom input component in Angular 2. What is the proper way to add an attribute to our custom component? The gist of our input component is something like this.</p>
  
  <p><em>input-debounce.component.ts</em></p>
  
  <pre><code>var template = `
    &lt;input
      [type]="inputType"
      [placeholder]="placeholder"&gt;
  `;
  
  @Component({
    selector: "input-debounce"
    template: template
  })
  
  export class InputDebounceComponent {
    @Input() inputType: string = "text";
    @Input() placeholder: string = "";
  }
  </code></pre>
  
  <p>What's the proper way to add an <code>aria-label</code> attribute to the custom component?</p>
  
  <pre><code>&lt;input-debounce
    [inputType]="'number'"
    [placeholder]="'Enter Number'"
    [attr.aria-label]="'Age'"&gt;
  &lt;/input-debounce&gt;
  </code></pre>
  
  <p>or adding <code>[aria-label]="ariaLabel"</code> in <code>template</code>, and <code>@Input() ariaLabel = "";</code> in the class, then call it like <code>[ariaLabel]="'Age'"</code> when using the custom component?</p>
  
  <p>When I did it the second way, Window's Narrator announce the aria label I put in, but the first way, it doesn't say anything.</p>