Generating dynamic rows and columns with Angular and Bootstrap in real time

Question

Generating dynamic rows and columns with Angular and Bootstrap in real time

I am looking to dynamically generate rows in an angular template, with each row containing 4 columns. For example, if the input is 40, the output should have 10 rows, each consisting of 4 columns. I am using bootstrap for my template layout. Below is what I have tried so far, but it's not working as expected.

<div class="row" *ngFor="let r of row">
  <div class="col-3" *ngFor="let i of id">{{i}}</div>
</div>

Here is the corresponding .ts code:

id: number = 40;
row: number = id / 4;

I am facing a challenge similar to dealing with matrices, but how can I achieve this in the template?

angular typescript

Answer 1

Answer №1

Check out this solution

  id: number = 40;
  row: number = Math.ceil(this.id / 4);
  row1 = Array(this.row).fill(1);
  id1 = Array(4).fill(0).map((_, index) => index + 1);
  row2 = Array(this.id).fill(1).map((_, index) => index + 1);

constructor() {
    var chunk_size = 4;
    var arr = this.row2;
    var groups = arr.map(function (e, i) {
      return i % chunk_size === 0 ? arr.slice(i, i + chunk_size) : null;
    })
      .filter(function (e) { return e; });
    this.matrix = groups;
  }

<div class="row" *ngFor="let r of row1;let i =index">
  <div class="col-3" *ngFor="let i of matrix[i]">{{i}}</div>
</div>

Check out an example here:https://stackblitz.com/edit/dynamic-row

Answer 2

Check out this solution

  id: number = 40;
  row: number = Math.ceil(this.id / 4);
  row1 = Array(this.row).fill(1);
  id1 = Array(4).fill(0).map((_, index) => index + 1);
  row2 = Array(this.id).fill(1).map((_, index) => index + 1);

constructor() {
    var chunk_size = 4;
    var arr = this.row2;
    var groups = arr.map(function (e, i) {
      return i % chunk_size === 0 ? arr.slice(i, i + chunk_size) : null;
    })
      .filter(function (e) { return e; });
    this.matrix = groups;
  }

<div class="row" *ngFor="let r of row1;let i =index">
  <div class="col-3" *ngFor="let i of matrix[i]">{{i}}</div>
</div>

Check out an example here:https://stackblitz.com/edit/dynamic-row

Generating dynamic rows and columns with Angular and Bootstrap in real time

Answer №1

Similar questions

Tips for managing numerous nested subscriptions

Stop/continue a stopwatch Observable

Troubleshooting: Unable to filter reducers in Redux when using the remove

The Fixed Navbar is causing sections to be slightly off from their intended positions

Tips for resolving the error message "TypeError: Converting circular structure to JSON"

Leveraging the outcome of an Observable in one method with another Observable in Angular2

Leveraging an external Typescript function within Angular's HTML markup

What is the best way to allow a C# Web API method to be accessed from any origin?

Combining Keycloak with Azure B2C for identity management and implementing the authorization code flow

struggling to access the value of [(ngModel)] within Angular 6 component

Reset combobox to its default value when a different event happens

What could be causing this issue of the Angular Material table not displaying properly?

Updating the text of a Mat-Label dynamically without the need to reload the page

Aligning Description Item components horizontally in antdLearn how to easily horizontally align Description

How can I designate the first enum value as 1 in a protobuf data structure?

When attempting to retrieve data from an API in Angular 8, I encountered difficulties in dynamically creating a formArray within a formArray

Azure Function responding with a 401 error code upon passing parameters through a proxy

Step-by-step guide on building a personalized rxjs operator using destructured parameters

Anticipating the completion of multiple observable subscription functions

The horizontal overflow is malfunctioning, resulting in only a limited number of columns being visible on the screen