title: Angular2 / Ionic2: Failed to execute 'setAttribute' on 'Element': '()' is not a valid attribute name.
body: <p>I have the problem, that no matter how I put it i won't get my custom component to accept the parameters I send it.</p>
  
  <p>I tried different approaches like with {{}}, '' or without "" but in the end I get the same <strong>Error</strong> if it does compile to the point of the template: </p>
  
  <p><em>Failed to execute 'setAttribute' on 'Element': '()' is not a valid attribute name.</em></p>
  
  <hr>
  
  <p>I tend to use the latest releases, which are bundled by the ionic-cli (2.1.17):</p>
  
  <ul>
  <li>Angular: 2.2.1 </li>
  <li>Ionic: 2.0.0 - rc.4 </li>
  <li>Typescript: 2.0.9</li>
  <li>rxjs: 5.0.0 - beta.12</li>
  </ul>
  
  <hr>
  
  <p>The basic class is
  <strong>substitute-helper.ts:</strong></p>
  
  <pre><code>    export class SubstituteHelper {
          number: number;
          kind: string;
      }
  </code></pre>
  
  <p>This is imported into <strong>substitute.ts:</strong></p>
  
  <pre><code>    import {Component, Input} from '@angular/core';
      import {SubstituteHelper} from '../../app/substitute-helper';
  
       @Component({
          selector: 'substitute',
          templateUrl: 'substitute.html'
       })
       export class SubstituteComponent {
          @Input()
          sub: SubstituteHelper;
       }
  </code></pre>
  
  <p>This is then used in <strong>application.ts</strong>:</p>
  
  <pre><code>    import {Component} from '@angular/core';
      import {NavController, NavParams} from 'ionic-angular';
      import {OverviewPage} from "../overview/overview";
      import {SubstituteHelper} from '../../app/substitute-helper';
  
      @Component({
          selector: 'page-application',
          templateUrl: 'application.html'
      })
      export class ApplicationPage {
          showSubstituteVar: boolean = false;
          subs: Array&lt;SubstituteHelper&gt;;
          subNo: number = 0;
  
          constructor(public navCtrl: NavController, public navParams: NavParams) {}
  
          addSubstitute(kind: string) {
              var sub = new SubstituteHelper();
              sub.number = this.subNo;
              sub.kind = kind;
              this.subs.push(sub);
              this.subNo += 1;
          }
  </code></pre>
  
  <p>In the <strong>HTML-template</strong> file I try and fail to use this:</p>
  
  <pre><code>    &lt;div *ngIf="subs.length&gt;0"&gt;
          &lt;div *ngFor="let substi of subs"&gt;
              &lt;substitute [sub]="substi"&gt;&lt;/substitute&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>