Send parameters to Component

Ionic Framework ionic-v3
1

HI,

I am trying to build a simple component, just a div that prints a parameter but the parameter isn’t been displayed:

test.html

<ion-content padding class="getting-started">
   <my-component [test]="Something"></my-component>
</ion-content>

test.ts

import {Page} from ‘ionic-framework/ionic’;
import {MyComponent} from ‘./myComponent’;

@Page({
templateUrl: ‘build/pages/test/test.html’,
directives: [MyComponent]
})

export class TestPage {
constructor() {
}
}

myComponent.ts

import {Component,Input} from 'angular2/core';

@Component({
  selector: 'my-component',
  template: `
    <div>Param: {{test}}</div>
   `,
})

export class MyComponent {
  @Input() test;
  constructor() {
  }
}

The result:

image

I can’t figure it out what I am missing.

Thanks in advantage.

2

indent preformatted text by 4 spaces In the test.html page you are using brackets around your property which signifies that the value, in this case “Something,” is binding the property to the variable Something. Looking at the constructor there has been one set. So you would either need to set up a variable or remove the brackets.

This would send fixed value of something:

<ion-content padding class="getting-started">
   <my-component test="Something"></my-component>
</ion-content>

Or like this:

<ion-content padding class="getting-started">
   <my-component [test]="Something"></my-component>
</ion-content>

import {Page} from 'ionic-framework/ionic';
 import {MyComponent} from './myComponent';

@Page({
 templateUrl: 'build/pages/test/test.html',
 directives: [MyComponent]
 })

export class TestPage {
 Something: string;
 constructor() {
     this.Something = 'Something';
 }
 }
2 Likes