table filter not showing the column name in place of no active filter also console is not...

filterModifiedReportRunTable() {
let filters = this.shareDashboardConfiguration.api.getFilterModel();
this.saveFilter(filters, 'reportRunResultGrid');
this.shareRunTableFilter = this.tableFilterService.filter(
this.shareDashboardConfiguration,
this.shareConfigurationcolumnDefs,
);
console.log("filterModifiedReportRunTable" +this.shareDashboardConfiguration);

console.log("filterModifiedReportRunTable" +this.shareConfigurationcolumnDefs);

console.log("filterModifiedReportRunTable" +this.shareRunTableFilter);
this.cdr.detectChanges(); // Manually trigger change detection

}
clearFilterShareTable(filter) {
this.removeFilter('reportRunResultGrid');
this.shareRunTableFilter = this.tableFilterService.clearFilter(
this.shareDashboardConfiguration,
this.shareConfigurationcolumnDefs,
filter,
);
console.log("filterModifiedReportRunTable" +this.shareDashboardConfiguration);

console.log("filterModifiedReportRunTable" +this.shareConfigurationcolumnDefs);

console.log("filterModifiedReportRunTable" +this.shareRunTableFilter);
this.cdr.detectChanges(); // Manually trigger change detection
}



<!-- Filter -->
<div class="row justify-content-between mx-0 mt-3">
<div class="m-2 ml-3" style="padding-top: 2px">
<strong style="font-size: 16px; letter-spacing: 1px; color: #e53e3e" translate>Filters:</strong>
<strong *ngIf="shareRunTableFilter == null || shareRunTableFilter.length == 0" style="color: #9aa8af" translate>
No Filter Selected
</strong>
<span class="filter-tabs" *ngFor="let filter of shareRunTableFilter">
{{ filter.columnName }}: {{ filter.filter }}
<a (click)="clearFilterShareTable(filter)" class="pl-2 cursor-pointer">&times;</a>
</span>
</div>
</div>



.gridster {
position: relative;
box-sizing: border-box;
background: none;
width: 100%;
height: calc(100vh - 190px);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: block;
}

.user-card-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.user-card-header .d-flex {
flex-grow: 1;
}

.user-card-header label {
margin-right: 0.5rem;
}

.user-card-header .form-control {
max-width: 200px; /* Adjust as needed */
}

.user-card-header .btn {
margin-left: 1rem;
}

.modal-background {
background-color:#0a192f !important;
}


i tried many ways still on the UI it is showing Filter: No active filters selected though we have applied filter successfully on column it should show the column header name on which filter is applied Filtercolumn header name). also my console.log is not showing anything on console. kindly help ..........................................

Continue reading...