Angular bootstrap hiding table column and its contents

Context

I am creating a web application where there is a lot of interaction with tables and their contents. Because the tables can get quite large in width I would like to implement an option that allows users to temporarily hide table columns.

Problem statement

At the moment I am able to hide a specific header itself with the following code.

<table>
    <thead>
    <tr>
        <th class="header" #header (click)="hideColumn(head, header)" *ngFor="let head of getHeadElements()"></th>
    </tr>
    </thead>
    <tbody>
    <ng-container ngFor="let component of components">
    <tr></tr>
    <tr></tr>
    </ng-container>
</table>

Typescript file

hideColumn(head: any, header: HTMLTableHeaderCellElement) {
console.warn(head);
header.hidden = true;
}

The good thing about this solution is that it actually does hide the header, but only the name and not the contents beneath it. Image of the issue is added below

Initial state

After clicking

Goals

My goal is to be able to click a certain header and remove the complete column (column title and all of its contents). Afterwards if necessary I would want to reset the table and restore its original columns.

How would I be able to solve this problem? Thanks beforehand!