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.

Do not use tags that are unrelated to solving your problem (ie. do not use the [sass] tag unless you think a Sass expert is going to be able to help you). — cimmanon, Apr 14 '16 at 11:45
@D.F. what is a point in nested `for` loop here `for (this.x = 0; this.x < ...` ? — tchelidze, Apr 14 '16 at 11:50

score 6 · Answer 1 · answered Apr 15 '16 at 08:30

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>

I Kept getting `Can't bind to 'mgRepeat' since it isn't a known property of..` because I choose to omit the `mgRepeat` beside the `@Input` **Please note:** `@Input` should have `mgRepeat` or the method name should be `mgRepeat` [ref](https://stackoverflow.com/a/40706065/234110) — Anand Rockzz, Mar 08 '19 at 06:07

score 4 · Answer 2 · answered Sep 04 '17 at 10:58

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.

Pritam Rajput · Answer 3 · 2021-04-16T11:05:22.660

2

<ng-container *ngFor="let i of [].constructor(20)">

</ng-container>

OR

<div *ngFor="let x of 'x '.repeat(lengthFromController + 1).split(' ') let i = index">
      {{i}}
</div>

OR better yet

<ul>
  <li>Method Fourth</li>
  <li *ngFor='let x of counter(demoLen) ;let i= index'>{{i}}</li>
</ul>

export class AppComponent {
  demoLen = 5 ;
  counter = Array;
}

edited Apr 16 '21 at 11:05

answered Apr 16 '21 at 10:14

Pritam Rajput

112
1
6

score 1 · Answer 4 · edited May 23 '17 at 12:25

1

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.

edited May 23 '17 at 12:25

Community

1
1

answered Apr 14 '16 at 11:52

Günter Zöchbauer

623,577
216
2,003
1,567

score 1 · Answer 5 · answered Dec 15 '19 at 07:16

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

score 0 · Answer 6 · answered Apr 17 '16 at 16:27

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

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

6 Answers6

Linked