Angular2 nested components variables not accessible in template

Question

Iv'e recently started playing around with Angular2, and face a pretty basic issue.

I'm trying to create a simple parent component that is simply a container of dynamic boxes. Each box has it's own properties and data.

What Iv'e done so far is the following:

The container class:

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {IONIC_DIRECTIVES} from 'ionic-angular';
import {MainBox} from './../../component/main-box/main-box.component';

@Component({
  selector      :   'wrapper',
  templateUrl   :   'build/component/main-container/main-container.component.html',
  directives    :   [IONIC_DIRECTIVES, MainBox]
})

export class MainContainer {
  boxes : MainBox[] = [
    {title : "mor"},
    {title : "naama"}
  ];
  constructor() {

  }
}

The container template

<div>
    <main-box *ngFor="let box of boxes"></main-box>
</div>

** main-box stands for each individual box

MainBox class:

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {IONIC_DIRECTIVES} from 'ionic-angular';

@Component({
  selector      :   'main-box',
  templateUrl   :   'build/component/main-box/main-box.component.html',
  directives    :   [IONIC_DIRECTIVES]
})

export class MainBox {
  title:any;
  constructor() {
  }
}

Box Template

{{title}}

I would expect that Angular will automatically display the right title, but in fact it shows nothing.

On the other hand, if I do the following:

<div *ngFor="let box of boxes">{{box.title}}</div>

I can see the title just fine, but it's not good enough for me since I wish to completely separate the template files.

Thanks!

Answer 1

You need to pass data explicitly to children:

<div>
    <main-box *ngFor="let box of boxes" [title]="box.title"></main-box>
</div>

export class MainBox {
  @Input()title:any;
  constructor() {
  }
}

Answer 2

You can only access the title in the main box if you provide the title as an input to it

   <div *ngFor="let box of boxes">
             <main-box [title]="box.title"></main-box>
   </div>