Input Decorator Breaks Directive/Component

Ionic Framework ionic-v3
1

I don’t know enough to be sure if this is an ionic bug or not but when I try to add an Input to the Directive/Component below it breaks. In the example below I am trying to add mytitle="test" as input to the <advanced-card></advanced-card> directive

home.html

<ion-navbar>
  <ion-title>Home</ion-title>
</ion-navbar>

<ion-content>
  
  <advanced-card mytitle="test"></advanced-card>
  
</ion-content>

home.js

import {Page} from 'ionic-framework/ionic';
import {AdvancedCard} from '../advanced-card/advanced-card';

@Page({
  templateUrl: 'build/pages/home/home.html',
  directives: [AdvancedCard]
})
export class HomePage {
  constructor() {
    
  }
}

advanced-card.html

<ion-card>
  <ion-item>
    <h1>{{mytitle}}</h1>
    <p>paragraph 1</p>
  </ion-item>
</ion-card>

advanced-card.js

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

@Component({
  selector: 'advanced-card',
  templateUrl: 'build/pages/advanced-card/advanced-card.html',
  directives: [IONIC_DIRECTIVES]
})
export class AdvancedCard {
 @Input() mytitle: string;
  constructor(){
  }
}

When I add the line

@Input() protected mytitle: string;

I get this error

Uncaught Error: Cannot find module "../advanced-card/advanced-card"

When I remove it, everything works and displays correctly

2

UPDATE

When I remove the input decorator

@Input() protected mytitle: string;

And hard code the mytitle variable as follows

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

@Component({
  selector: 'advanced-card',
  templateUrl: 'build/pages/advanced-card/advanced-card.html',
  directives: [IONIC_DIRECTIVES]
})
export class AdvancedCard {  
  constructor(){
      this.mytitle= 'This Works';
  }
}

The Directive/Component works correctly

image

Why does it break with the input decorator? Is this a bug?

4

In your home.html, shouldn’t your input be inside brackets?

As in:

<advanced-card [mytitle]="test">

Could you try that?

5

If you aren’t using TypeScript you can use the inputs property in your @Component:

@Component({
  selector: 'advanced-card',
  templateUrl: 'build/pages/advanced-card/advanced-card.html',
  directives: [IONIC_DIRECTIVES],
  inputs: ['mytitle']
})

For more on the issue, take a look at: https://github.com/driftyco/ionic/issues/5741#issuecomment-193375733

6

@tim you’re the man :+1:
After converting my files to Typescript everything works as expected. Here’s the updated version for anybody else having this issue:

advanced-card.ts

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

@Component({
  selector: 'advanced-card',
  templateUrl: 'build/pages/advanced-card/advanced-card.html',
  directives: [IONIC_DIRECTIVES]
})
export class AdvancedCard {
  
  @Input() mytitle: string;
  
  constructor() {
    
  }
}
1 Like
7

Is possible pass object into directive?
<advanced-card data="{{object}}"></advanced-card> @Input() data: any;
with this i am getting [Object object] type string in data.

1 Like