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!

Günter Zöchbauer · Accepted Answer · 2016-07-24 13:41:09Z

2

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() {
  }
}

answered Jul 24, 2016 at 13:41

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MorKadosh Over a year ago

So I must do that for every attribute? is there a better practice to achieve my goals?

Günter Zöchbauer Over a year ago

You can pass box to the template instead of box.title and then use {{box.title}} or {{box?.title}} in the box template instead of just {{title}}

MorKadosh Over a year ago

Thanks, I would really appreciate an example though :)

Derek Kite Over a year ago

If you have multiple attributes and a child tree a few levels deep, you may want to have your data in a service. The @Input works fine for child components, but falls apart quickly if you have more than that.

Piyush.kapoor · Accepted Answer · 2016-07-24 13:43:51Z

0

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>

answered Jul 24, 2016 at 13:43

Piyush.kapoor

6,8311 gold badge25 silver badges21 bronze badges

2 Comments

Günter Zöchbauer Over a year ago

There is no need to move *ngFor to a parent element. Title needs to be an input for [title]="box.title" to work (see my answer).

Piyush.kapoor Over a year ago

yes i just checked ngfor would work in main box too thanks

Collectives™ on Stack Overflow

Angular2 nested components variables not accessible in template

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related