Ionic 2: when I pass array to component I get a string on component.ts

Question

I have a problem when I try to to pass an array to a component trough an input. I console.log the array on home.ts and i get is an object, and then, when i pass it to the component, on component.ts i get it is a string.

I dont know if i do it well

On component ts I have this:

@Component({
  selector: 'micomponente',
  templateUrl: 'micomponente.html'
})
export class MicomponenteComponent {
    @Input() pra:any=[];
  text: string;

  constructor() {
    console.log('Hello MicomponenteComponent Component');
    this.text = '';
  }

   ngOnInit() {
    console.log(typeof(this.pra)) //this is the red arrow on the picture
    this.text = this.pra;
  }

}

home.html

<ion-content padding>
 <micomponente pra="{{algo}}"></micomponente>
</ion-content>

home.ts

export class HomePage {
algo:any=[];

  constructor(public navCtrl: NavController) {
    this.algo.push(['1','fsa']);
    this.algo.push(['2','fsd']);
    console.log(this.algo)

  }

}

and this is console log

Answer 1

To pass data to a child component the property should be put in brackets [] and property should be in quotes. In your example the input data should be passed like this:

<ion-content padding>
    <micomponente [pra]="algo"></micomponente>
</ion-content>

See https://angular.io/guide/component-interaction for how to pass data to and from a child component. Double curly braces are used for interpolation, to display properties as string in html. Please read here for more information about interpolation: https://angular.io/guide/template-syntax#interpolation---- .