fabric-samples/full-stack-asset-transfer-guide/applications/frontend/src/app/app.component.html

<mat-toolbar   color="primary"><div style="text-align: center;width: 100%;">Asset (Create,Edit,Delete,Transfer)</div></mat-toolbar>
<div class="layout">
    <div class="layout">
        Assets
        <div class="search">
            <mat-form-field>
                <input matInput (keyup)="applyFilter($event)" placeholder="Search" #input>
            </mat-form-field>
            <button mat-raised-button color="primary" style="margin-left: 30px;" (click)="addNewAsset()">Create
                Asset</button>
        </div>
        <table mat-table matTableExporter [dataSource]="dataSource" matSort class="mat-elevation-z8"
            style="width: 100%;">

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row;let i = index; columns: displayedColumns;"></tr>
            <ng-container matColumnDef="position">
                <th mat-header-cell *matHeaderCellDef> No. </th>
                <td mat-cell *matCellDef="let element; let i = index"> {{ (i+1) + (paginator.pageIndex *
                    paginator.pageSize) }} </td>
            </ng-container>
            <ng-container matColumnDef="id">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
                <td mat-cell *matCellDef="let element"> {{element.ID}} </td>
            </ng-container>
            <ng-container matColumnDef="color">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Color </th>
                <td mat-cell *matCellDef="let element"> {{element.Color}} </td>
            </ng-container>
            <ng-container matColumnDef="owner">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Owner </th>
                <td mat-cell *matCellDef="let element"> {{element.Owner}} </td>
            </ng-container>
            <ng-container matColumnDef="appraisedValue">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Appraised Value </th>
                <td mat-cell *matCellDef="let element"> {{element.AppraisedValue}} </td>
            </ng-container>
            <ng-container matColumnDef="size">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Size </th>
                <td mat-cell *matCellDef="let element"> {{element.Size}} </td>
            </ng-container>
            <ng-container matColumnDef="transfer">
                <th mat-header-cell *matHeaderCellDef> Trasnfer </th>
                <td mat-cell *matCellDef="let element;let i = index" style="padding-right: 15px;">
                    <span class="material-icons" style="cursor: pointer;" (click)="delete(element,i)">arrow_forward</span>
                </td>
            </ng-container>
            <ng-container matColumnDef="edit">
                <th mat-header-cell *matHeaderCellDef> Edit </th>
                <td mat-cell *matCellDef="let element;let i = index" style="padding-right: 15px;">
                    <span class="material-icons" style="cursor: pointer;" (click)="editRow(element,i)">edit</span>
                </td>
            </ng-container>
            <ng-container matColumnDef="delete">
                <th mat-header-cell *matHeaderCellDef> Delete </th>
                <td mat-cell *matCellDef="let element;let i = index" style="padding-right: 15px;">
                    <span class="material-icons" style="cursor: pointer;" (click)="delete(element,i)">delete</span>
                </td>
            </ng-container>


        </table>
        <mat-paginator [length]="100" showFirstLastButtons [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
        </mat-paginator>
    </div>
</div>