title: Angular2 ngFor Parent Element
body: <p>I'm trying to conditionally wrap my bootstrap col-xs-4's three to a row.  I have my col-xs-4's rendering fine but i can't figure out how to get them condtionally wrapped in a row.  Here is my curren't NgFor:</p>
  
  <pre class="lang-ts prettyprint-override"><code> &lt;div class="col-xs-4" *ngFor='let linkGroup of linkGroups | siteMapText: siteMapTextFilter; let i=index'&gt;
          &lt;ul class="list-unstyled"&gt;
              &lt;li class="heading"&gt;
                  &lt;div class="clearfix"&gt;
                      &lt;span [className]="linkGroup.ContainerCssClass"&gt;
                          &lt;span [className]="linkGroup.CssClass"&gt;&lt;/span&gt;
                      &lt;/span&gt;
                      &lt;a href="#"&gt;
                          &lt;strong class="heading-text"&gt;{{linkGroup.Title}}&lt;/strong&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li *ngFor='let link of linkGroup.Links'&gt;
                  &lt;a href="#" class="link"&gt;
                      &lt;span [className]="link.CssClass"&gt;&lt;/span&gt;
                      &lt;span class="item"&gt;{{link.Title}}&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>What I would like to do is something like this, but i know its wrong, so what is the right way to do this:</p>
  
  <pre class="lang-ts prettyprint-override"><code> &lt;div *ngIf='i % 3== 0' class="row"&gt;
          &lt;div class="col-xs-4" *ngFor='let linkGroup of linkGroups | siteMapText: siteMapTextFilter; let i=index'&gt;
              &lt;ul class="list-unstyled"&gt;
                  &lt;li class="heading"&gt;
                      &lt;div class="clearfix"&gt;
                          &lt;span [className]="linkGroup.ContainerCssClass"&gt;
                              &lt;span [className]="linkGroup.CssClass"&gt;&lt;/span&gt;
                          &lt;/span&gt;
                          &lt;a href="#"&gt;
                              &lt;strong class="heading-text"&gt;{{linkGroup.Title}}&lt;/strong&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li *ngFor='let link of linkGroup.Links'&gt;
                      &lt;a href="#" class="link"&gt;
                          &lt;span [className]="link.CssClass"&gt;&lt;/span&gt;
                          &lt;span class="item"&gt;{{link.Title}}&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>EDIT</p>
  
  <p>The answer was as Gunter suggested, to reorganize the data to be grouped into rows.  Then I could organize the template to this:</p>
  
  <pre class="lang-ts prettyprint-override"><code>&lt;div class="row" *ngFor='let linkRow of linkRows| siteMapRowText: siteMapTextFilter'&gt;
      &lt;div class="col-xs-4" *ngFor='let rowCol of linkRow.RowGroups'&gt;
          &lt;ul class="list-unstyled"&gt;
              &lt;li class="heading"&gt;
                  &lt;div class="clearfix"&gt;
                      &lt;span [className]="rowCol.ContainerCssClass"&gt;
                          &lt;span [className]="rowCol.CssClass"&gt;&lt;/span&gt;
                      &lt;/span&gt;
                      &lt;a href="#"&gt;
                          &lt;strong class="heading-text"&gt;{{rowCol.Title}}&lt;/strong&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li *ngFor='let link of rowCol.Links'&gt;
                  &lt;a href="#" class="link"&gt;
                      &lt;span [className]="link.CssClass"&gt;&lt;/span&gt;
                      &lt;span class="item"&gt;{{link.Title}}&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>