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

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 9×3 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.

5
Leave a Reply

avatar
5 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

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!!!

Jason
Guest

In my case i wanted to make a price rating dynamic something like this

‘Price Rating : $$$’ or ‘Price Rating : $$’ without making an array to repeat this “$”

so i knew that my rating is 5 at most
and this working well for me .

   <ng-container *ngFor="let i of [1, 2, 3, 4, 5] | slice: 0:place.priceRating">
      $
   </ng-container>

priceRating maybe from 0 to 5

hope that help

Jason
Guest

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>

Jason
Guest

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.

Jason
Guest

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.