Xtykutl

I've trying to do a basic Angular display of ParentObject->Row->Cell. So a ParentObject has an array of Rows and each row has an array of Cells.

My parent object looks like this:

export class ParentObject implements OnInit {

  private gameRows: GamerowComponent;



  constructor() {

    this.gameRows = ;



    for (var i: number = 0; i < 11; i++) {

      this.gameRows[i] = new GamerowComponent();

    }



  this.gameRows[1].gameCells[0].text = 'A';

  this.gameRows[2].gameCells[0].text = 'B';

  this.gameRows[3].gameCells[0].text = 'C';

  this.gameRows[4].gameCells[0].text = 'D';

  this.gameRows[5].gameCells[0].text = 'E';

  this.gameRows[6].gameCells[0].text = 'F';

  this.gameRows[7].gameCells[0].text = 'G';

  this.gameRows[8].gameCells[0].text = 'H';

  this.gameRows[9].gameCells[0].text = 'I';

  this.gameRows[10].gameCells[0].text = 'J';

}

A GameRow just exposes the game cells via properties:

export class GamerowComponent implements OnInit {

  private _gameCells: GamecellComponent;



  constructor() {

    this._gameCells = ;

    for (var i:number=0; i < 11; i++) {

      this._gameCells[i] = new GamecellComponent();

    }

  }



  ngOnInit() {

  }



  get gameCells(): GamecellComponent{

    return this._gameCells;

  }



  set gameCells(value: GamecellComponent) {

    this._gameCells = value;

  }

}

And the cell is just a text and cssclass object:

export class GamecellComponent implements OnInit {

  private _text: string;

  private _cssClass: string;



  constructor() {

    this._cssClass = 'tablemarker';

  }



  ngOnInit() {

  }



  get text(): string {

    return this._text;

  }



  set text(value: string) {

    this._text = value;

  }

  get cssClass(): string {

    return this._cssClass;

  }



  set cssClass(value: string) {

    this._cssClass = value;

  }

}

I set up the html for a table / row / cell view:

ParentObject:

<table class="no-spacing">

  <tr *ngFor="let gameRow of gameRows">

    <app-gamerow></app-gamerow>

  </tr>

</table>

Gamerow:

<app-gamecell *ngFor="let cell of gameCells"></app-gamecell>

Gamecell:

<td class="{{cssClass}}">{{text}}</td>

I correctly get an HTML table rendered with 11 rows and cells. The cssClass is correctly rendered, but the text never shows.

When I break the script in the browser after the instantiation of the 11 rows, they all have their text set correctly. How come the staticly set cssClass text works (set in the class constructor) but the assignment from a parent down through the children does not?

You should pass the values to child through @Input. Below is the modified version of your code.

Parent Component

<table class="no-spacing">

  <tr *ngFor="let gameRow of gameRows">

    <app-gamerow [row]="gameRow"></app-gamerow>

  </tr>

</table>

Gamerow Component

ts

export class GamerowComponent implements OnInit {



 @Input() row; 



  ngOnInit() {

  }

}

html

<app-gamecell *ngFor="let cell of row.gameCells" [cell]="cell"></app-gamecell>

Gamecell Component

ts

export class GamecellComponent implements OnInit {



  @Input() cell; 

  private _cssClass: string;



  constructor() {

    this._cssClass = 'tablemarker';

  }



  ngOnInit() {

  }



  get cssClass(): string {

    return this._cssClass;

  }



  set cssClass(value: string) {

    this._cssClass = value;

  }

}

html

<td class="{{cssClass}}">{{cell.text}}</td>

You shouldn't be instantiating the components directly-- leave that to Angular.

Instead, hold your data in normal objects, and pass them into the components.

In GameCellComponent, you can add an input, like so:

@Input()

public text: String;



@Input()

public cssClass: String;

You can then pass those values in, like so:

<div *ngFor="let cell of gameCells">

  <app-gamecell [text]="cell.text" [cssClass]="cell.cssClass"></app-gamecell>

</div>