CODEWITHSUNDEEP
angular
j-p
j-p

Reputation: 3828

How do I do a for loop in angular, but limit it to 'three across'

I have an object that looks like this:

{
    Label 1 : [Item 1,Item 2,Item 3],
    Label 2 : [Item 1,Item 2,Item 3],
    Label 3 : [Item 1,Item 2,Item 3],
    Label 4 : [Item 1,Item 2,Item 3],
    Label 5 : [Item 1,Item 2,Item 3],
    Label 6 : [Item 1,Item 2,Item 3],
}

Using Angular 5 - and I want to display it Like this: 

Label 1   Label 2   Label 3
Item 1    Item 1    Item 1
Item 2    Item 2    Item 2   
Item 3    Item 3    Item 3


Label 4   Label 5   Label 6
Item 1    Item 1    Item 1
Item 2    Item 2    Item 2   
Item 3    Item 3    Item 3

I think I need a "mod" operator, does Angular have that? and what is the syntax, and how does it fit into tables or divs for display (as above).

I'm at a total loss. Any help greatly appreciated.

Per Malard's request - Here is an example of the static html, that I am trying to replace with data driven from an object returned from a server.

<div class="row" >

    <div class="col-sm-4" >

        <div class="x-table" >

            <div class="x-table-header" >
                <span class="heading" >Label 1</span>
            </div>

            <div class="x-table-space" ></div>

            <div class="x-table-features" >
                <p>Item 1</p>
                <p>Item 2</p>
                <p>Item 3</p>
                <p>Item 4</p>
                <p>Item 5</p>
            </div>

        </div>

    </div>

    <div class="col-sm-4" >

        <div class="x-table" >

            <div class="x-table-header" >
                <span class="heading" >Label 2</span>
            </div>

            <div class="x-table-space" ></div>

            <div class="x-table-features" >
                <p>Item 1</p>
                <p>Item 2</p>
                <p>Item 3</p>
                <p>Item 4</p>
                <p>Item 5</p>
            </div>

        </div>

    </div>

    <div class="col-sm-4" >

        <div class="x-table" >

            <div class="x-table-header" >
                <span class="heading" >Label 3</span>
            </div>

            <div class="x-table-space" ></div>

            <div class="x-table-features" >
                <p>Item 1</p>
                <p>Item 2</p>
                <p>Item 3</p>
                <p>Item 4</p>
                <p>Item 5</p>
            </div>

        </div>

    </div>

</div>

<div class="row" >

    <div class="col-sm-4" >

        <div class="x-table" >

            <div class="x-table-header" >
                <span class="heading" >Label 4</span>
            </div>

            <div class="x-table-space" ></div>

            <div class="x-table-features" >
                <p>Item 1</p>
                <p>Item 2</p>
                <p>Item 3</p>
                <p>Item 4</p>
                <p>Item 5</p>
            </div>

        </div>

    </div>

</div>

Upvotes: 0

Views: 59

Answers (1)

Ludevik
Ludevik

Reputation: 7264

I have created simple stackblitz demo for you using bootstrap for grid.

Component:

export class AppComponent  {
  data = [
    {label: 'Label 1', items: ['Item 1','Item 2','Item 3']},
    {label: 'Label 2', items: ['Item 1','Item 2','Item 3']},
    {label: 'Label 3', items: ['Item 1','Item 2','Item 3']},
    {label: 'Label 4', items: ['Item 1','Item 2','Item 3']},
    {label: 'Label 5', items: ['Item 1','Item 2','Item 3']},
    {label: 'Label 6', items: ['Item 1','Item 2','Item 3']}
  ];
}

Template:

<div class="container">
  <div class="row">
    <div *ngFor="let column of data" class="col-sm-4" >
      {{column.label}}
      <div *ngFor="let item of column.items">
        {{item}}
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions