Quote from Ingo on March 14, 2019, 5:36 pm

Hello John,

for shoh in the data-table:

<mat-cell fxFlex="15%" *matCellDef="let row"> {{row.price | currency:companyCurrency:'symbol':'1.2-2'}} </mat-cell>

for number

<mat-cell fxFlex="15%" *matCellDef="let row"> {{row.completeAmount | number:'1.2-2'}} </mat-cell>

for percent

<mat-cell fxFlex="15%" *matCellDef="let row"> {{row.rateOfTax | percent:'1.2-2'}} </mat-cell>

For input I do not use. But you can use

ngx-mask

regards Ingo

<mat-cell fxFlex="15%" *matCellDef="let row"> {{row.rateOfTax | percent:'1.2-2'}} </mat-cell>

For input I do not use. But you can use

Quote from Ingo on March 14, 2019, 5:38 pm

Hi,

currency input I use:

<input matInput formControlName="currencyRate" [readonly]="!isEditMode" required type="number" />

 

Quote from john le on March 14, 2019, 5:51 pm

Quote from Ingo on March 14, 2019, 5:38 pm

Hi,

currency input I use:

<input matInput formControlName="currencyRate" [readonly]="!isEditMode" required type="number" />

1. <input matInput formControlName="currencyRate" [readonly]="!isEditMode" required type="number" />

<input matInput formControlName="currencyRate" [readonly]="!isEditMode" required type="number" />

 

Hi @Ingo,

I having used your format but it allow input 'e' character or special character.

Thanks,

Quote from john le on March 14, 2019, 5:54 pm

Quote from Ingo on March 14, 2019, 5:36 pm

Hello John,

for shoh in the data-table:

<mat-cell fxFlex="15%" *matCellDef="let row"> {{row.price | currency:companyCurrency:'symbol':'1.2-2'}} </mat-cell>

1. <mat-cell fxFlex="15%" *matCellDef="let row"> {{row.price | currency:companyCurrency:'symbol':'1.2-2'}} </mat-cell>

<mat-cell fxFlex="15%" *matCellDef="let row"> {{row.price | currency:companyCurrency:'symbol':'1.2-2'}} </mat-cell>

for number

<mat-cell fxFlex="15%" *matCellDef="let row"> {{row.completeAmount | number:'1.2-2'}} </mat-cell>

1. <mat-cell fxFlex="15%" *matCellDef="let row"> {{row.completeAmount | number:'1.2-2'}} </mat-cell>

<mat-cell fxFlex="15%" *matCellDef="let row"> {{row.completeAmount | number:'1.2-2'}} </mat-cell>

for percent

<mat-cell fxFlex="15%" *matCellDef="let row"> {{row.rateOfTax | percent:'1.2-2'}} </mat-cell>

1. <mat-cell fxFlex="15%" *matCellDef="let row"> {{row.rateOfTax | percent:'1.2-2'}} </mat-cell>

<mat-cell fxFlex="15%" *matCellDef="let row"> {{row.rateOfTax | percent:'1.2-2'}} </mat-cell>

For input I do not use. But you can use

ngx-mask

regards Ingo

Hi @Ingo,

I don't use datatable for input data, i used mat-form-field:

<mat-form-field [floatLabel]="floatLabels" fxFlex>
          <input matInput placeholder="Amout" type="number" formControlName="amount"
            class="number-right-align" />
        </mat-form-field>

Thanks,

Quote from Ingo on March 15, 2019, 11:31 am

HI,

I also do not use the table for input.

I use this:

<input matInput formControlName="currencyRate" [readonly]="!isEditMode" required type="number" />

But its has no format.

Show this link https://www.npmjs.com/package/ngx-mask

Regards Ingo

Quote from Ingo on March 15, 2019, 5:57 pm

Hi,

I found this:

<input matInput type="text" placeholder="Test Price" [ngModel]="testPrice | currency:'USD':'symbol':'2.2'" [ngModelOptions]="{updateOn:'blur'}" 
      (ngModelChange)="testPrice=$event"/> You can use the pipe currency, number or percentage. See also:

https://stackoverflow.com/questions/39642882/using-pipes-within-ngmodel-on-input-elements-in-angular

https://stackoverflow.com/questions/47355669/how-to-get-an-input-to-display-and-edit-currency-with-angular-4-pipes

Quote from Eben Monney on March 16, 2019, 10:43 pm

Hello,

As Ingo recommended pipes are good for these kind of formatting. Take a look at the inbuilt angular CurrencyPipe https://angular.io/api/common/CurrencyPipe

Also you can consider node package like ngx-mask https://www.npmjs.com/package/ngx-mask

If you want to implement your own custom formatting, this post will show you how to use directives to achieve it https://blog.ngconsultant.io/custom-input-formatting-with-simple-directives-for-angular-2-ec792082976

Regards,
Eben Monney

Quote from john le on March 29, 2019, 7:36 am

Dear @Ingo,

Thanks you for support. I have used ng-mask and it hard working.

 

Thanks,

John LE