boilerplate-list.component.html

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a  routerLink="../../">Projects</a></li>
    <li class="breadcrumb-item" aria-current="page">Requirement List</li>
  </ol>
</nav>
<div class="list row">
    <div class="col-md-14">
      <div fxFlex fxLayout fxHide.xs fxLayoutAlign="end">
        <input
          type="text"
          class="form-control"
          placeholder="Search"
          (keyup)="applyFilter($event)"
          #input/>
      </div>
        <div fxFlex fxLayout fxHide.xs fxLayoutAlign="end">
          <ul fxLayout fxLayoutGap="15px" class="navigation-items">
              <div>
            <input class="btn btn-success" type="button" value="Add Requirement" routerLink="add-boilerplate"/>
              </div>
          </ul>
      </div>
      <div fxFlex fxLayout fxHide.xs fxLayoutAlign="end">
        <ul  *ngFor="let inf of infer;" fxLayout fxLayoutGap="15px" class="navigation-items">
            <div>
          <input class="btn btn-info" 
                type="button" 
                value="Inferencing"
                (click)="updateInfer(inf.id)"/>
            </div>
        </ul>
    </div>
      
    </div>
</div>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="newdataSource" class="mat-elevation-z8">
  <!-- Position Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="prefix_data">
    <th mat-header-cell *matHeaderCellDef> Prefix </th>
    <td mat-cell *matCellDef="let element"> {{element.prefix_data}} </td>
  </ng-container>
  <!-- Name Column -->
  <ng-container matColumnDef="title_data">
    <th mat-header-cell *matHeaderCellDef> Title </th>
    <td mat-cell *matCellDef="let element"> {{element.title_data}} </td>
  </ng-container>

  <ng-container matColumnDef="main_data">
    <th mat-header-cell *matHeaderCellDef> Main </th>
    <td mat-cell *matCellDef="let element"> {{element.main_data}} </td>
  </ng-container>

  <ng-container matColumnDef="suffix_data">
    <th mat-header-cell *matHeaderCellDef> Suffix </th>
    <td mat-cell *matCellDef="let element"> {{element.suffix_data}} </td>
  </ng-container>
  
  <!-- Action Column -->
   <ng-container matColumnDef="action">
    <th mat-header-cell *matHeaderCellDef> Action </th>
    <td mat-cell *matCellDef="let element" class="action-link"> 
      <a class="btn btn-info" routerLink="details/{{element.id}}">Edit</a>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="newdisplayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: newdisplayedColumns;"></tr>
</table>
<mat-paginator #paginator [pageSizeOptions]="[10, 20]" showFirstLastButtons></mat-paginator>
</div>