Angular2 / Ionic2: Failed to execute 'setAttribute' on 'Element': '()' is not a valid attribute name.

Question

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.

I tried different approaches like with {{}}, '' or without "" but in the end I get the same Error if it does compile to the point of the template:

Failed to execute 'setAttribute' on 'Element': '()' is not a valid attribute name.

---

I tend to use the latest releases, which are bundled by the ionic-cli (2.1.17):

• Angular: 2.2.1
• Ionic: 2.0.0 - rc.4
• Typescript: 2.0.9
• rxjs: 5.0.0 - beta.12

---

The basic class is substitute-helper.ts:

    export class SubstituteHelper {
        number: number;
        kind: string;
    }

This is imported into substitute.ts:

    import {Component, Input} from '@angular/core';
    import {SubstituteHelper} from '../../app/substitute-helper';

     @Component({
        selector: 'substitute',
        templateUrl: 'substitute.html'
     })
     export class SubstituteComponent {
        @Input()
        sub: SubstituteHelper;
     }

This is then used in application.ts:

    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<SubstituteHelper>;
        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;
        }

In the HTML-template file I try and fail to use this:

    <div *ngIf="subs.length>0">
        <div *ngFor="let substi of subs">
            <substitute [sub]="substi"></substitute>
        </div>
    </div>

Answer 1

Just guessing by reading the code and from what is show there. I found two possible issues:

• <div *ngIf="subs && subs.length>0"> (subs is probably undefined at that time)
• subs: SubstituteHelper[] = [] (initialize the value)

Answer 2

Without the *ngIf and the () I put in a tag above, this is what solved this error for now.

    <div *ngFor="let substi of subs">
        <substitute [sub]="substi"></substitute>
    </div>