See more/Add more rows in table angular-CodePudding

Ive googled so much, but I cant figure out what Im not getting. I search for the example in the image below, but I can only find how to extend one particular row in the table.

I want to add more individual rows to the table when the "see more" btn is clicked from the API. Am I searching for the wrong thing, since I cant be able to find anything, or any packages that supports this? If so, what is it called that I cant be able to understand? Im using Angular as framework

img of the table with the see more btn

CodePudding user response：

Since I don't know what is your code I imagine you has a table with data and some like

<tr *ngFor="let element of elements">
  <td>{{element.prop1}}</td>
  <td>{{element.prop2}}</td>
</tr>

Just can use slice pipe and a variable "page"

page:number=0 //<--declare variable in your .ts

<tr *ngFor="let element of elements |slice:0:(page*6)">
  <td>{{element.prop1}}</td>
  <td>{{element.prop2}}</td>
</tr>
<tr>
  <td colspan="2" *ngIf="page*6<elements.length>
    <button (click)="page=page 1">more</button>
  </td>
<tr>

If you has a table with values (really you should use tables only to show tabulated data) you can has a variable "more"

    more=false; //<--declare variable in your .ts

    <tr>
      <td>{{element.prop1}}</td>
    </tr>
    <tr>
      <td>{{element.prop2}}</td>
    </tr>
    ....
    <tr>
      <td *ngIf="!more">
        <button (click)="more=true">more</button>
      </td>
    <ng-container *ngIf="more">
      <tr>
        <td>{{element.prop3}}</td>
      <tr>
      <td>
        <button (click)="more=false">less</button>
      </td>
   </ng-container>