Recently delving into Angular2, I've encountered a simple issue.
My aim is to create a basic parent component that acts as a container for dynamic boxes, each with its own properties and data.
Here's what I've accomplished so far:
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 represents 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}}
Assumedly, Angular should display the correct title automatically, yet it appears blank.
However, by implementing the following:
<div *ngFor="let box of boxes">{{box.title}}</div>
I am able to view the title accurately, although I prefer to keep the template files entirely separate.
Thank you!