Angular2 / Ionic2: Failed to execute 'setAttribute' on 'Element': '()' is not a valid attribute name.
<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>