How can I use NgFor without creating arrays to generate matrix UI pattern

Question

I would like to implement UI matrix pattern, which should generate dynamically. By receiving input parameter it should decide what would be UI matrix pattern dimensions: For example 9X3 elements: pattern 9x3 elements

I use Angular2.js, typescript, SCSS.

html tamplate and .ts looks:

import {Component, Input, OnInit} from 'angular2/core';
import {NgFor} from 'angular2/common';

@Component({
  selector   : 'game-pattern',
  moduleId   : module.id,
  templateUrl: 'game-pattern.component.html',
  styleUrls  : ['game-pattern.component.css'],
  directives : [NgFor],
})
export class GamePatternComponent implements OnInit {
  @Input('CardType') public cardType: number;

  public horizontalElementLocation: number;
  public verticalElementLocation: number;
  public rows: number[]     = [];
  public elements: number[] = [];
  public y: number;
  public x: number;

 // public cardType = 3;
 constructor() {
    this.cardType = 3;
  }

  public ngOnInit() {
    console.log('cardType ' + this.cardType);
    this.chooseGamePattern();
  }

  public chooseGamePattern() {
    if (this.cardType === 3) {
      this.horizontalElementLocation = 9;
      this.verticalElementLocation   = 3;
    }

    for (this.y = 0; this.y < this.verticalElementLocation; this.y++) {
      this.rows[this.y] = 0;
      for (this.x = 0; this.x < this.horizontalElementLocation; this.x++) {
        this.elements[this.x] = 0;
      }
    }
  }
}

<div id="game-pattern" >
  <div class="pattern-row" *ngFor="#row of rows">
    <div class="big-circle" *ngFor="#elemnt of elements"> 
      <div class="small-circle"></div>
    </div>
  </div>
</div>

** this code could not run in this environment :)*

Question: How can I use NgFor without creating arrays to generate UI. I mean, if I will receive input x=9 and y=3 it should build UI matrix pattern of 9X3. Please advise :)

Thanks.

Answer 1

Create custom STRUCTURAL DIRECTIVE which repeats template N times.

import {TemplateRef, ViewContainerRef, Directive, Input} from 'angular2/core';

@Directive({
   selector: '[mgRepeat]'
})
export class mgRepeatDirective {
   constructor(
       private _template: TemplateRef,
       private _viewContainer: ViewContainerRef
   ) { }

   @Input('mgRepeat')
   set times(times: number) {
       for (let i = 0; i < times; ++i)
           this._viewContainer.createEmbeddedView(this._template);
   }
}

Use as follows

<div id="game-pattern" >
  <div class="pattern-row" *mgRepeat="verticalElementLocation">
     <div class="big-circle" *mgRepeat="horizontalElementLocation"> 
        <div class="small-circle"></div>
     </div>
 </div>
</div>

Answer 2

Building arrays just to iterate over them seems lavish. Creating a Directive to replace ngFor is sort of redundant.

Instead you could use a Pipe returning an Iterable and use it like this:

<div *ngFor="let i of 30|times">{{ i }}</div>

For an implementation of such a Pipe have a look at my other answer on Repeat HTML element multiple times using ngFor based on a number.

Answer 3

You can either create an helper array like shown in Repeat HTML element multiple times using ngFor based on a number using new Array(count).fill(1) and use ngFor to iterate over this array or you can implement your own structural directive like NgFor that doesn't iterate over an array but instead uses a count as input.

Answer 4

After reading all answers I managed to solve it:

 public chooseGamePattern() {
    if (this.cardType === 3) {
        this.horizontalElementLocation = 9;
        this.verticalElementLocation = 3;
        this.rows = new Array(this.verticalElementLocation);
        this.elements = new Array(this.horizontalElementLocation);
    }

It works for me. Thank You all!!!