How to set condition of a NaN value to show/hide a view using ngIf | angular 6

Question

I want to hide a label when the value is NAN using *ngIf* but it's not working.

The marked label is the default value of a variable, once the input is filled the value will be a number I want to show the label only when the value is not NAN

What tried

     // undefined
    <mat-hint *ngIf="this.cost_liter !== 'undefined'" >cost/liter: {{this.cost_liter}}</mat-hint>
   // 'undefined'
    <mat-hint *ngIf="this.cost_liter !== 'undefined'" >cost/liter: {{this.cost_liter}}</mat-hint>
    //!=
    <mat-hint *ngIf="this.cost_liter != undefined" >cost/liter: {{this.cost_liter}}</mat-hint>
    //!== NAN
    <mat-hint *ngIf="this.cost_liter !== NAN" >cost/liter: {{this.cost_liter}}</mat-hint>
     //!= NAN
  <mat-hint *ngIf="this.cost_liter != NAN" >cost/liter: {{this.cost_liter}}</mat-hint>
     //!== null
   <mat-hint *ngIf="this.cost_liter !== null" >cost/liter: {{this.cost_liter}}</mat-hint>
    // != null
   <mat-hint *ngIf="this.cost_liter != null" >cost/liter: {{this.cost_liter}}</mat-hint>

i am sure that ngIf is working, since i set a condition if the value greater than 0. and it works, but still not my need

    // > 0
   <mat-hint *ngIf="this.cost_liter != null" >cost/liter: {{this.cost_liter}}</mat-hint>

It's a funny little quirk of JavaScript that `NaN != NaN`, so your comparison there will always return true. — John Montgomery, Nov 09 '18 at 19:24

Maihan Nijat · Accepted Answer · 2018-11-09T19:34:36.517

You can use JavaScript method isNAN(this.cost_liter) to check or you can use Number.isNaN().

Use if (Number.isNaN(this.cost_liter))

Both methods return true or false, and returns false if the value is null.

This is how you do:

<mat-hint *ngIf="!Number.isNaN(this.cost_liter)" >cost/liter: {{this.cost_liter}}</mat-hint>

Or you can define a method in the component and call each time you need it.

isNumber(value) {
  return Number.isNaN(value);
}

And use in the template:

<mat-hint *ngIf="!isNumber(this.cost_liter)" >cost/liter: {{this.cost_liter}}</mat-hint>

score 6 · Answer 2 · answered Nov 09 '18 at 19:20

6

Since the method isNan is not know in you template , you can declare it in the component :

isNaN: Function = Number.isNaN;

then in your template call it like this :

<mat-hint *ngIf="!isNAN(this.cost_liter)" >cost/liter: {{this.cost_liter}}</mat-hint>

Regards,

answered Nov 09 '18 at 19:20

Mohamed Ali RACHID

3,245
11
22

1

please can you specify where to add the `isNaN` function in the ts component ? i tried to add it in the class declaration, but not working, and in the `ngOnInit()` but still not working, Regards – Ali Nov 09 '18 at 19:30
you should add it as an attribute of your component : export class yourComponent { isNaN: Function = Number.isNaN; constructor(){} } – Mohamed Ali RACHID Nov 09 '18 at 19:35
this is exactly what i tried but i am getting this error `FuelContainerComponent.html:28 ERROR TypeError: _co.isNAN is not a function` – Ali Nov 09 '18 at 19:38
can you show how did you use it in the html template ? ( as you can see the error is in your html ) – Mohamed Ali RACHID Nov 09 '18 at 19:39
ts: `isNaN: Function = Number.isNaN; constructor(private fuelContServ: FuelContainerService,private modalService: NgbModal,public snackBar: MatSnackBar) {}` html:` cost/liter: {{this.cost_liter}}` – Ali Nov 09 '18 at 19:42
what is the type of the attribute cost_liter ? – Mohamed Ali RACHID Nov 09 '18 at 19:45
it is declared `cost_liter=0;` – Ali Nov 09 '18 at 19:50

How to set condition of a NaN value to show/hide a view using ngIf | angular 6

2 Answers2