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, Aug 24 '16 at 20:23
check this for example http://run.plnkr.co/plunks/gvEQDugoQ1OQPvsZXuuM/ — rashfmnb, Aug 24 '16 at 20:33

score 2 · Accepted Answer · answered Aug 24 '16 at 20:33

2

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

answered Aug 24 '16 at 20:33

Madhu Ranjan

17,334
7
60
69

Actually this does not pass the value into the input of the component. I reworked your plunkr to show it : https://plnkr.co/edit/thAs3Fwf2rkRMn4aIjbv?p=preview – Ced Aug 25 '16 at 11:14
1

you have to look into the way you have created the array, it was not defined properly hence you were getting iussues, [updated your Plunker](https://plnkr.co/edit/DrAL2a4bdVCt5H3boipY?p=preview), Cheers! – Madhu Ranjan Aug 25 '16 at 13:57

score 1 · Answer 2 · answered Aug 24 '16 at 20:37

1

cubeArray is tied to specific div and nested ngFor are possible

check this Plunker

answered Aug 24 '16 at 20:37

rashfmnb

9,959
4
33
44

scope of *ngFor let variable

2 Answers2