@Input on Component returns Unexpected token

Ionic Framework ionic-v3
1

I’m trying to create a component to use in my app, but when I try to use @Input it breaks, returning the error: “Unexpected token”.

My code:

    import {Component, Input} from 'angular2/core';
    import {IONIC_DIRECTIVES} from 'ionic-angular';

    @Component({
      selector: 'review',
      templateUrl: 'build/pages/bars/review/review.html',
      directives: [IONIC_DIRECTIVES]
    })
    export class Review {
      @Input() private steps: string;

      constructor() {
    ...
2

Is this a typescript app or es6?

Anyway you could isolate the component to a more complete example we could look at?

3

It is es6. I found out that the syntax I’m using is ts, but I haven’t found the js syntax.

The complete code:

import {Component, Input} from 'angular2/core';
import {IONIC_DIRECTIVES} from 'ionic-angular';

@Component({
  selector: 'review',
  templateUrl: 'build/pages/bars/review/review.html',
  directives: [IONIC_DIRECTIVES]
})
export class Review {
  @Input() steps;

  constructor() {
    this.passos = steps;
    this.maxPasso = this.passos.length - 1;

    this.numeroPasso = 0;
    this.passo = this.passos[this.numeroPasso];
  }

  proximoPasso() {
    this.numeroPasso = this.numeroPasso + 1;
    this.passo = this.passos[this.numeroPasso];
  }

  voltarPasso() {
    this.numeroPasso = this.numeroPasso - 1;
    this.passo = this.passos[this.numeroPasso];
  }
}
4

So in es6, you’d probably want to do

@Component({
  selector: 'review',
  templateUrl: 'build/pages/bars/review/review.html',
  directives: [IONIC_DIRECTIVES],
  inputs: ['steps']
})
export class Review {

You can see this here.

https://angular.io/docs/ts/latest/cookbook/ts-to-js.html#!#property-metadata

1 Like
5

It works :slight_smile: ! Thank you very much for your help!