Only make selected columns as sortable instead of all columns in angular material table

I am using angular material table and here is code as follow :

<mat-table [dataSource]="dataSource" matSort >
    <!-- Table columns -->
    <ng-container *ngFor="let column of displayedColumns; let i = index" [matColumnDef]="column">
      <th mat-header-cell *matHeaderCellDef [mat-sort-header]="sortableColumns.includes(column) ? column : ''" style="flex: 1">{{ headerLabels[i] }}</th>

      <td mat-cell *matCellDef="let element" style="flex: 1">
        <!-- Apply number formatting to specific columns -->
        <ng-container *ngIf="shouldApplyNumberFormatting(column)">
          {{ element[column] | number }}
        </ng-container>
        <!-- Display other columns as is -->
        <ng-container *ngIf="!shouldApplyNumberFormatting(column)">
          {{ element[column] }}
        </ng-container>
      </td>
    </ng-container>
  
    <!-- Table rows -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns; let even = even" [class.mat-table-alternate-row]="even"></tr>
  </mat-table>

Its currently show sort option on all the columns but I want that on certain columns so I decided to declare an array for the column name as sortableColumns which I need the sorting option and apply

[mat-sort-header]="sortableColumns.includes(column) ? column : ''"

but still its shows sorting option on all columns.

here is the .ts file code where sort is bind

constructor(private dashboardService: DashboardService,private decimalPipe: DecimalPipe) { }

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  ngAfterViewInit(): void {
    if (this.dataSource) {
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    }
  }

  ngOnInit(): void {
    this.dashboardService.getDashboardData().subscribe((data: DashboardData[]) => {
      
      this.dataSource = new MatTableDataSource<DashboardData>(data);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    });
  }

You have a property "disabled" in mat-sort-header, see the docs

So, I imagine you need use some like

<th mat-header-cell *matHeaderCellDef 
   [mat-sort-header]="column" 
   [disabled]="!sortableColumns.includes(column)">
...
</th>

NOTE: you can not apply dinamically a directive in the .html. If is an attribute or class or style you can binding to "null" if the condition is not sucefully, but this not work with a directive.

<!--only if is an attribute-->
<div [attr.NameAtribute]="(condicion)?true:null"></div>
<!--or, we can use-->
<div [class.myClass]="condition?true:null"></div>

<!--this NOT work-->
<div [mat-sort-header]="(condition)?true:null"></div>