Angular - How to expand table - html

Question

I need help expanding a table. For example, when I click on the full-screen icon the table covers the whole page. I'm trying to do this way but it's not working, I didn't get any errors, but the script is working because is changing the class name.
These are the codes. The card.component.html file is the model that complements the dashboard.component.html. The
card.component.ts has the full-screen code, and dashboard.component.html has the table.
File card.component.html
<div class="card {{ fullCard }} {{ cardLoad }}" [#cardClose]="cardClose"
[ngClass]="cardClass">
<div class="card-header" *ngIf="title">
<h5>{{ title }}</h5>
<span *ngIf="!classHeader">{{ headerContent }}</span>
<span *ngIf="classHeader">
<ng-content select=".code-header"></ng-content>
</span>
<div class="card-header-right">
<ul class="list-unstyled card-option">
<li *ngIf="!isCardToggled" (click)="this.isCardToggled=
!this.isCardToggled"><i class="icofont icofont-simple-left"></i></li>
<li *ngIf="isCardToggled" (click)="this.isCardToggled=
!this.isCardToggled"><i class="icofont icofont-simple-right"></i></li>
<li *ngIf="isCardToggled"><i class="icofont icofont-maximize {{
fullCardIcon }} full-card" (click)="fullScreen($event)"></i></li>
<li *ngIf="isCardToggled"><i class="icofont icofont-minus minimize-card"
appCardToggleEvent (click)="toggleCard($event)"></i></li>
</ul>
</div>
</div>
<div [#cardToggle]="cardToggle">
<div class="card-body" [ngClass]="blockClass">
<ng-content></ng-content>
</div>
</div>
<div class="card-loader" *ngIf="loadCard"><i class="icofont icofont-refresh
rotate-refresh"></i></div>
</div>
File card.component.ts
import { Component, OnInit, Input, ViewEncapsulation } from '#angular/core';
import {cardToggle, cardClose} from './card-animation';
#Component({
selector: 'app-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.scss'],
animations: [cardToggle, cardClose],
encapsulation: ViewEncapsulation.None
})
export class CardComponent implements OnInit {
#Input() headerContent: string;
#Input() title: string;
#Input() blockClass: string;
#Input() cardClass: string;
#Input() classHeader = false;
cardToggle = 'expanded';
cardClose = 'open';
fullCard: string;
fullCardIcon: string;
loadCard = false;
isCardToggled = false;
cardLoad: string;
constructor() { }
ngOnInit(): void {
}
toggleCard(event: any) {
this.cardToggle = this.cardToggle === 'collapsed' ? 'expanded' : 'collapsed';
}
closeCard(event: any) {
this.cardClose = this.cardClose === 'closed' ? 'open' : 'closed';
}
fullScreen(event: any) {
this.fullCard = this.fullCard === 'full-card' ? '' : 'full-card';
this.fullCardIcon = this.fullCardIcon === 'icofont-resize' ? '' : 'icofont-resize';
}
appCardRefresh() {
this.loadCard = true;
this.cardLoad = 'card-load';
setTimeout( () => {
this.cardLoad = '';
this.loadCard = false;
}, 3000);
}
}
File dashboard.component.html
<div class="col-md-12 col-xl-8 left">
<app-card [title]="'Squads Information'"
[cardClass]="'project-task'" [blockClass]="'p-b-10'">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Squad</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="task-contain">
<h6 class="bg-c-blue d-inline-block text-center">A</h6>
<p class="d-inline-block m-l-60 table-text">AG Technology I</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<app-card>
</div
File styles.scss
.pcoded {
.card {
&.full-card {
position: fixed;
top: 80px;
z-index: 99999;
box-shadow: none;
right: 0;
border-radius: 0;
border: 1px solid #ddd;
width: calc(100vw - 287px);
height: calc(100vh - 80px);
&.card-load {
position: fixed;
}
}
&.card-load {
position: relative;
overflow: hidden;
.card-loader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
background-color: rgba(255, 255, 255, 0.7);
z-index: 999;
i {
margin: 0 auto;
color: #ab7967;
font-size: 20px;
}
}
}
}
&[vertical-nav-type="expanded"] .card.full-card {
width: calc(100vw - 287px);
}
&[vertical-nav-type="collapsed"] .card.full-card {
width: calc(100vw - 97px);
}
&[vertical-nav-type="offcanvas"] .card.full-card {
width: 100vw;
}
}