Show table on button click in angular

Question

On clicking the scan button, mat table should be displayed.

app.component.html:

 <button class="btn btn-primary">Scan</button>
 <div class="table-responsive">
 <table class="table-bg" mat-table [dataSource]="dataSource" matSort>
 <div>
 <ng-container matColumnDef="slNo">
 <th mat-header-cell *matHeaderCellDef mat-sort-header> Sl. No.</th>
 <td mat-cell *matCellDef="let item ; let i= index">{{ i + 1 }}</td>
 </ng-container>
 <ng-container matColumnDef="name">
 <th mat-header-cell *matHeaderCellDef mat-sort-header> Name</th>
 <td mat-cell *matCellDef="let item ; let i= index">{{name}} </td>
 </ng-container>
 </div>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row;  columns: displayedColumns;"></tr>
 </table>
</div>

Adam DP · Accepted Answer · 2021-09-21 17:02:37Z

you can accomplish this using an *ngIf.

In the typescript file (app.component.ts) create a new variable called showTable and set it to be false by default.

showTable: boolean = false;

we will then make it so that the button toggles this to be true or false by creating a function that the button will call. Put this function in app.component.ts as well

toggleShowTable(): void {
    this.showTable = !this.showTable;
}

Finally, we will add the code to your html to make this all work.

Add a (click) function to your button like so:

 <button (click)='toggleShowTable()' class="btn btn-primary">Scan</button>

And add an *ngIf to the opening tag of your table like so:

 <table *ngIf='showTable' class="table-bg" mat-table [dataSource]="dataSource" matSort>

Your table will now not show by default but once you click the button it will begin to show.

Collectives™ on Stack Overflow

Show table on button click in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related