Cannot enter decimal point in primeNG p-columnFilter

Question

I am using p-table and p-columnFilter components in a modal in my angular project.

I am using the following libraries:

"primeflex": "^2.0.0",
"primeicons": "^4.1.0",
"primeng": "^11.2.0",
"@angular/cli": "^11.2.5",

here my HTML:

<th>
    <div class="flex justify-content-center align-items-center">
            Pressure ({{pressureUnits}})
        <p-columnFilter type="numeric" field="tyre_pressure" display="menu">
        </p-columnFilter>
    </div>
</th>

Except for the input generated inside the p-column, everything is good. Only numbers can be entered into the filter, not decimals.

Typing 56.8 into the input or paste 56.8 into the input does not work.

** SOLUTION ** using yoelb00 answer this is the code that worked:

<div class="flex justify-content-center align-items-center">
    Pressure ({{pressureUnits}})
    <p-columnFilter field="tyre_pressure" matchMode="equals" display="menu">
        <ng-template pTemplate="filter" let-value let-filter="filterCallback">
            <input type="number" pInputText [ngModel]="value" (ngModelChange)="filter($event)" class="p-inputtext">
        </ng-template>
    </p-columnFilter>
</div>

Answer 1

You can use ng-template and you can write your own input, it will solve your problem

  <p-columnFilter type="number" field="tyre_pressure" display="menu">
    <ng-template pTemplate="filter" let-value let-filter="filterCallback">
                    <input type="number" pInputText [ngModel]="value" (ngModelChange)="filter($event)" class="p-inputtext"> </ng-template>
  </p-columnFilter>

Answer 2

You can use pipes like the currency in the following example

Price <p-columnFilter type="numeric" field="finalPrice" display="menu" currency="SAR"></p-columnFilter> <p-sortIcon field="finalPrice"></p-sortIcon>