CODEWITHSUNDEEP
htmlangulartypescriptgrid
RootAtKali
RootAtKali

Reputation: 185

How to create dynamic grid component in angular 8 and bootstrap whit row, col and list string?

I have a problem understanding how to create a grid component, which has in input of a number of columns, rows and a list of strings for the inside element of grid.

my thumbnails.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'thumbnails',
  templateUrl: './thumbnails.component.html',
  styleUrls: ['./thumbnails.component.scss']
})

export class ThumbnailsComponent{

  public UrlList = ["one","two","three","four","five","six","seven","eight","nine","ten"];
  private col: Number = 4;
  private row: Number = 4;

}

my thumbnails.component.html

<div id="grid">
    <ng-container *ngFor="let x of UrlList; let i = index">
        <div class="row">
            <div class="col">
                {{x}}
            </div>
        </div>
    </ng-container>
</div>

I don't know how to implement it. Can someone help me and explain it to me?

Upvotes: 3

Views: 9251

Answers (2)

Soham Biswas
Soham Biswas

Reputation: 31

Another approach is the CSS way using display gird with gridTemplateColumns properties.

thumbnails.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'thumbnails',
  templateUrl: './thumbnails.component.html',
  styleUrls: ['./thumbnails.component.scss']
})

export class ThumbnailsComponent{

  public UrlList =["one","two","three","four","five","six","seven","eight","nine","ten"];

  grid(v) {
    document.getElementById(
      'grid'
    ).style.gridTemplateColumns = `repeat( ${v.value}, 175px)`;//Important step
  }
}

thumbnails.component.css

.grid-container {
  display: grid;
  grid-gap: 15px;
}

thumbnails.component.html

<label>Enter Col :</label><input type="text" #col />
<button (click)="grid(col)">Set Grid</button>
<div id="grid" class="grid-container row">
  <ng-container *ngFor="let x of UrlList; let i = index">
    <div class="col">
      {{ x }}
    </div>
  </ng-container>
</div>

Upvotes: 2

Ali Wahab
Ali Wahab

Reputation: 592

Try this code:
your.compomnent.html

<div>
  <input type="number" [(ngModel)]="rows" />
  <input type="number" [(ngModel)]="colums" />
  <button (click)="setDimension()" type="button">Change</button>
  <table class="table">
      <thead>
        <tr>
          <th scope="col" *ngFor="let col of colArray; index as i">{{i+1}}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let col of rowArray; index as i">
          <td *ngFor="let col of colArray; index as j">{{j+1}}</td>
        </tr>
      </tbody>
    </table>
</div>


your.compomnent.ts

 colArray = [];
 rowArray = [];
 colums = 4;
 rows = 10;
 setDimension(){
    this.colArray = [];
    this.rowArray = [];
    for(let i = 0; i<this.colums; i++){
      this.colArray.push(i);
    }
    for(let i = 0; i<this.rows; i++){
      this.rowArray.push(i);
    }
  }

The i which is pushed in rowArray could be your string URLs.

Note: Table is the good way to use grids. You can even use BS rows and cols

Upvotes: 1

Related Questions