scope of *ngFor let variable

Question

I tried to nest *ngFor like this :

   <div *ngFor="let cubeArray of cubeMatrice">
    <my-cube *ngFor="let cube of cubeArray">
    </my-cube>
   </div>

However that does not work. Is it that the variable cubeArray is only tied to that specific div tag ?

I also tried some other solutions I've found here : How to use Angular2 templates with *ngFor to create a table out of nested arrays? but that does not work with vanilla html tags.

I know I can use a component in between to resolve the issue. I just want to know if nested fors are possible somehow or why not. Is the scope of cubeArray variable only the div ?

cubeArray is tied to specific div and nested for are possible — rashfmnb
check this for example run.plnkr.co/plunks/gvEQDugoQ1OQPvsZXuuM — rashfmnb

Madhu Ranjan Madhu Ranjan · Accepted Answer · 2016-08-24T20:33:34

What is the issue you are facing?

I tried it in a Plunker and it works.

import { Component, Input }  from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h3 class="title">Basic Angular 2</h3>
  <hr />
  <div *ngFor="let cubeArray of cubeMatrice">
    <my-cube *ngFor="let cube of cubeArray" [var1]="cube.prop1" >
   </my-cube>
   </div>
  `
  })
  export class AppComponent {
   cubeMatrice = [
     [{prop1: 'val1'},{prop1: 'val2'}],
     [{prop1: 'val3'},{prop1: 'val4'}]
   ]

   constructor(){}
}

 @Component({
 selector: 'my-cube',
 template: `{{var1}}
  `
 })
 export class MyCubeComponent {
  @Input() var1;
  constructor(){}
 }

Have a look.

Hope this helps!!

scope of *ngFor let variable

2 Answers