Merge branch 'master' into refactor/header

siemens · Nov 21, 2024 · 365813e · 365813e
2 parents f8100bf + e818477
commit 365813e
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git a/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts b/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts
@@ -76,7 +76,11 @@ import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
         }
 
         @if (!column.cellTemplate) {
-          <span [title]="sanitizedValue" [innerHTML]="value"> </span>
+          @if (column.bindAsUnsafeHtml) {
+            <span [title]="sanitizedValue" [innerHTML]="value"> </span>
+          } @else {
+            <span [title]="sanitizedValue">{{ value }}</span>
+          }
         } @else {
           <ng-template
             #cellTemplate

diff --git a/projects/ngx-datatable/src/lib/components/columns/column.directive.ts b/projects/ngx-datatable/src/lib/components/columns/column.directive.ts
@@ -25,6 +25,7 @@ export class DataTableColumnDirective<TRow> implements TableColumn, OnChanges {
   private columnChangesService = inject(ColumnChangesService);
   @Input() name: string;
   @Input() prop: TableColumnProp;
+  @Input({ transform: booleanAttribute }) bindAsUnsafeHtml?: boolean;
   @Input({ transform: booleanAttribute }) frozenLeft: boolean;
   @Input({ transform: booleanAttribute }) frozenRight: boolean;
   @Input({ transform: numberAttribute }) flexGrow: number;

diff --git a/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts b/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts
@@ -47,7 +47,8 @@ import { NgTemplateOutlet } from '@angular/common';
         </ng-template>
       } @else {
         <span class="datatable-header-cell-wrapper">
-          <span class="datatable-header-cell-label draggable" (click)="onSort()" [innerHTML]="name">
+          <span class="datatable-header-cell-label draggable" (click)="onSort()">
+            {{ name }}
           </span>
         </span>
       }

diff --git a/projects/ngx-datatable/src/lib/types/table-column.type.ts b/projects/ngx-datatable/src/lib/types/table-column.type.ts
@@ -119,6 +119,14 @@ export interface TableColumn<TRow = any> {
    */
   prop?: TableColumnProp;
 
+  /**
+   * By default, the property is bound using normal data binding `<span>{{content}}</span>`.
+   * If this property is set to true, the property will be bound as `<span [innerHTML]="content" />`.
+   *
+   * **DANGER** If enabling this feature, make sure the source of the data is trusted. This can be a vector for HTML injection attacks.
+   */
+  bindAsUnsafeHtml?: boolean;
+
   /**
    * Cell template ref
    */