@Input decorator breaks Ionic 2 App

[alyn000r]

Short description of the problem:

When I add @input decorator the app breaks saying:
Module build failed: SyntaxError: ~/app/pages/user/user.js: Unexpected token (9:13)

What behavior are you expecting?

It should not break, I saw countless tutorials using this decorator.

I have imported the Input from angular2/core

Steps to reproduce:
1.
2.
3.

insert any relevant code between the above and below backticks

import {Component, Input} from 'angular2/core';
@Component({
  selector: 'user',
  templateUrl: 'build/pages/user/user.html',
  inputs: ['name']
})

export class User {
  @Input name:string
  constructor(){

    }

  setUser(user) {
      this.userName = user.name;
      this.pictureURL = user.picture.data.url;
  }

}

Ionic Version: 2

Browser & Operating System: Chrome

Run ionic info from terminal/cmd prompt:

Ionic Version Info:
Cordova CLI: 5.4.0
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
ios-deploy version: Not installed
ios-sim version: 5.0.6 
OS: Mac OS X El Capitan
Node Version: v5.3.0
Xcode version: Xcode 7.2.1 Build version 7C1002

[ihadeed]

Not an expert with Angular 2 here but I think you need to add brackets after @Input ...
So it should look like this @Input() name;

[alyn000r]

I tried it with Input() also and it still does not work.

@input() name: string;

[alyn000r]

Here this is another guy having the same issue

https://forum.ionicframework.com/t/input-decorator-breaks-directive-component/45110

[leifwells]

In your html is your input surrounded by brackets?

[name]="bob"

[alyn000r]

yes I had it like this

[name]="username"

and I was trying to set this.username in my js file as stated above

[alyn000r]

this is the guide I was trying to follow
http://www.sitepoint.com/angular-2-components-inputs-outputs/

[alyn000r]

My HTML File on how I am trying to use the directive is as follows:

<ion-menu id="leftMenu" [content]="content">
  <ion-content>
    <ion-item class="menu-background">
        <user [name]="Bob"></user>
    </ion-item>
    <ion-list>
      <button class="asbestos" ion-item *ngFor="#p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
    <div>
      <p class="copyright asbestos">&copy; 2016. All rights reserved</p>
    </div>
  </ion-content>

</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>

[alyn000r]

My User component HTML is as follows:

<div class="welcome-div">
   <span class="welcome-message">Welcome {{name}}</span>
</div>

[tlancina]

From user.js it looks like you're using the JavaScript version of the starters, in which case I believe declaring class properties outside the constructor is invalid:

class MyClass {
  name = "blah" // can't do this

  constructor(){
    this.name = "blah" // can do this
  }
}

You can do it in TypeScript however:

class MyClass {
  name: string = "blah"; //shorthand for this.name = "blah"
}

I'm actually not sure what the status of property decorators is with Babel or how one would make use of @Input() and @Output() outside of TypeScript, so if anyone knows I would love to see the syntax. However, you can use the inputs and outputs array on your @Page or @Component:

@Component({
  selector: 'user',
  templateUrl: 'build/pages/user/user.html',
  inputs: ['name']
})

It looks like you've already done this, so you shouldn't need to use @Input().

We're going to be switching the tutorials and code examples on the docs to default to TypeScript: ionic-team/ionic-site#479, so hopefully that removes some of the friction and confusion for people who are seeing Angular 2 examples in TypeScript and then starting Ionic projects that don't use it.

Going to close as not a bug, but please let us know if we can clarify anything or you're still having issues, thanks!

[alyn000r]

Thank You