title: Angular Table row-span and col-span based on typescript data object
body: <p><a href="https://i.stack.imgur.com/J4g6D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J4g6D.png" alt="ow"></a></p>
  
  <p><a href="https://stackblitz.com/edit/angular-arma3g?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">Stackblitz Demo of code You can edit for reference.</a></p>
  
  <p>As shown in above image, Table is generated using dynamica data coming from class file data-object. and based on row-span and col-span data-object value in class table generated with those settings. I have done col-span of table based on data-object settings.</p>
  
  <p>My Question is that, see on second Row and column <code>Thursday31</code> starts col-span by three, which is <code>Thrusday Friday and Saturday</code> col-spans. after col-spans done remaining is <code>sunday</code>. But <code>ngFor</code> starts from where condition breaks and display remaining more data which is <code>Friday saturday Sunday</code>. I want only to display remaining value only after col-span done, means result should me <code>only sunday</code> after col-span from <code>thrusday31</code>.</p>
  
  <p><strong>typescript data.ts</strong></p>
  
  <pre><code>  weeks = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Firday', 'Saturday', 'Sunday'];
  
   mySentences = [
     {"Id":"abc","Name":"Cus1","day":2,"begin":3,"total":2},
     {"Id":"bcf","Name":"Cus2","day":4,"begin":2,"total":3},
     {"Id":"uuu","Name":"Cus3","day":7,"begin":5,"total":4}, 
   ].sort((a,b) =&gt; a.begin &lt; b.begin ? -1 : 1 );
  </code></pre>
  
  <p>In `mySentences...</p>
  
  <pre><code>begin = starts form row,
  day = starts from column,
  total = col-span value.
  </code></pre>
  
  <p><strong>HTML is</strong></p>
  
  <pre><code> &lt;div class="col-md-12" &gt;
      &lt;table class="table table-bordered table-dark table-hover hidder" id="report"&gt;
          &lt;!-- Header --&gt;
          &lt;tr&gt;
              &lt;td style="width: 10%;"&gt;&lt;/td&gt;
              &lt;th style="width: 10%;"&gt;Monday&lt;/th&gt;
              &lt;th style="width: 10%;"&gt;Tuesday&lt;/th&gt;
              &lt;th style="width: 10%;"&gt;Wednesday&lt;/th&gt;
              &lt;th style="width: 10%;"&gt;Thursday&lt;/th&gt;
              &lt;th style="width: 10%;"&gt;Friday&lt;/th&gt;
              &lt;th style="width: 10%;"&gt;Satuday&lt;/th&gt;
              &lt;th style="width: 10%;"&gt;Sunday&lt;/th&gt;
          &lt;/tr&gt;
            &lt;ng-container *ngFor="let item of [1,2,3,4,5,6,7]; let i = index;"&gt;
          &lt;tr&gt;
            &lt;td&gt; {{item}} &lt;/td&gt;
          &lt;ng-container *ngFor="let week of weeks; let j = index"&gt;
  
            &lt;ng-container *ngFor="let sm of mySentences"&gt;
  
              &lt;ng-container *ngIf="sm.begin === i+1 ; "&gt;
  
  
              &lt;td *ngIf="sm.day === j+1; else weekDay"  [attr.colspan]= "sm.total" &gt;
                 {{week + j+1 }}
              &lt;/td&gt;
              &lt;/ng-container&gt;
                &lt;ng-template #weekDay&gt;
                &lt;td&gt;  {{week}} &lt;/td&gt;
                &lt;/ng-template&gt;       
              &lt;/ng-container&gt;
              &lt;/ng-container&gt;
            &lt;/tr&gt;
  
       &lt;ng-template #elseTmp&gt;
         &lt;td style="width: 10%;"&gt;row: {{i+1}}&lt;/td&gt;
              &lt;td style="width: 10%;"&gt;col: 2&lt;/td&gt;
              &lt;td style="width: 10%;"&gt;col: 3&lt;/td&gt;
              &lt;td style="width: 10%;"&gt;col: 4&lt;/td&gt;
              &lt;td  style="width: 10%;"&gt;col: 5&lt;/td&gt;
              &lt;td style="width: 10%;"&gt;col: 6&lt;/td&gt;
              &lt;td style="width: 10%;"&gt;col: 7&lt;/td&gt;
              &lt;td style="width: 10%;"&gt;col: 8&lt;/td&gt;
       &lt;/ng-template&gt;
  
  &lt;/ng-container&gt;
      &lt;/table&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>And also, remaining row display normal, remaining means not in <code>mySentence</code> array of object.</p>