How to set columnMode/... of a ngx-datatable without binding to ViewModel?

Question

I'm starting to use ngx-datatable.

I've currently this:

            <ngx-datatable
            #table
            class="material"
            [columns]="columns"
            [headerHeight]="50"
            [footerHeight]="50"
            rowHeight="auto"
            [limit]="10"
            [rows]="testService.tests$ |async"
            [columnMode]="'force'"
            [selected]="selected"
          >
          </ngx-datatable>

but angular isn't too happy with the columnMode: Type '"force"' is not assignable to type 'ColumnMode'.

I've been checking the exemple of ngx-datatable, and they actually seems to bind to ColumnMode.force.

I saw that I can import it in my component viewModel( import { ColumnMode } from '@swimlane/ngx-datatable';), but that would implie to declare a property here just to be able to bind to the ngx-datatable.

Is there a way to reference or specify the columnMode directly in the template?

Answer 1

You can apply columnMode="force" for your <ngx-datatable> element.

<ngx-datatable 
  columnMode="force"
  ...
>
</ngx-datatable>

Sample Demo on StackBlitz

---

1.0 According to ngx-datatable DataTableComponent (Line 186):

@Input() columnMode: ColumnMode | keyof typeof ColumnMode = ColumnMode.standard;

It is acceptable to pass columnMode with a string value.

For the detailed explanation for the keyof typeof on a enum, you may refer to @Yogesh's answer on What does "keyof typeof" mean in TypeScript?

---

2.0 According to Angular - Property Binding docs,

The brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression. Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.