title: How to create dynamic grid component in angular 8 and bootstrap whit row, col and list string?
body: <p>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.</p>
  
  <p>my <strong><em>thumbnails.component.ts</em></strong></p>
  
  <pre><code>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;
  
  }
  </code></pre>
  
  <p>my <strong><em>thumbnails.component.html</em></strong></p>
  
  <pre><code>&lt;div id="grid"&gt;
      &lt;ng-container *ngFor="let x of UrlList; let i = index"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col"&gt;
                  {{x}}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/ng-container&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I don't know how to implement it. Can someone help me and explain it to me?</p>