CODEWITHSUNDEEP
angular
Mark
Mark

Reputation: 2587

Angular iterate and create new rows

In the array below, assume the first number indicates row, the second column. How would you iterate over the array and break (new div) for each row?

array = ['1:1', '1:2', '1:3', '2:1', '2:2', '2:3', '3:1', '3:2', '3:3'];

<ng-container *ngFor="let item of array;">
    <div class="row">{{item}}</div> // div for every row
</ng-container>

Upvotes: 0

Views: 600

Answers (1)

Passionate Coder
Passionate Coder

Reputation: 7294

You can use this below concept for doing this.

Note :

1 Use Pipe instead of doing this calculation in component. I just added in component to give you an idea

.ts

export class AppComponent {

  dataArray = ['1:1', '1:2', '1:3', '2:1', '2:2', '2:3', '3:1', '3:2', '3:3'];
  newArr = []
  preRow = 0
  preCcolumn = 0
  localArr = []

  ngOnInit() {
    this.dataArray.forEach((data, i) => {
      let array = data.split(':')
      let row = array[0]
      let column = array[1]
      if (this.preRow === +row) {
        this.localArr.push(`${row}:${column}`)
      } else {
        if (this.localArr.length === 0) {
          this.localArr.push(`${row}:${column}`)
        } else {
          this.newArr.push(this.localArr)
          this.localArr = []
          this.localArr.push(`${row}:${column}`)
        }
      }

      this.preRow = +row
      this.preCcolumn = +column

    })
    this.newArr.push(this.localArr)
  }
}

.html

<div class="row" *ngFor="let row of newArr; let i = index">
  <div class="column" *ngFor="let value of row;">
    {{value}}
  </div>
</div>

working link

https://stackblitz.com/edit/angular-ivy-jruymf

Upvotes: 1

Related Questions