How to check null or empty or undefined in Angular?

null checking is an common validation that every developer need to know.

In this tutorial, We are going to discuss about how to check an null or empty or undefined check in Angular.

Angular uses Typescript as programming language, Since typescript is strongly typed so We are going to discuss multiple ways to check null

We are going to discuss about multiple ways

• Checking null in Angular template html component
• Checking null in Angular typescript component
• Angular check for Array is empty or null or undefined
• Angular check for object is null or undefined
• Angular ngIf null check

How to check an variable string is empty or undefine or null in Angular

This example check an variable of type string or object checks

• Angular typescript component
• Template html component

Typescript component, Written a function for checking null or undefined or empty using typeOf operator It is check for undefined value and returns true if it is null

isNameCheck(): boolean {
    if (typeof this.stringValue != 'undefined' && this.stringValue) {
      return false;
    }
    return true;
  }

Here is complete Angular component example

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  stringValue = null;

  isNameCheck(): boolean {
    if (typeof this.stringValue != 'undefined' && this.stringValue) {
      return false;
    }
    return true;
  }
}

In template html component:

We can use ngIf directive to check empty null or undefined.

In this example, if stringValue is empty or null or undefined, It prints empty message

stringValue can be number or string or array or object

<div *ngIf="stringValue">
  <span>stringValue is not empty</span>
</div>

<div *ngIf="!stringValue">
  <span>stringValue is empty.</span>
</div>
{{isNameCheck()}}

NgIf array empty check in Angular

ngIf checks an array using length and returns the length of an array.

The below code is check below things

• myArray is empty or not using ? operator
• if myArray is not null, It check for length property

<div *ngIf="!myArray?.length ">
  <span>Array is empty</span>
</div>
<div *ngIf="myArray?.length ">
  <span>
    Array is not empty
  </span>
</div>

Check if an object is empty in Angular

In typescript component, We can check using custom function which checks if there is no properties in An object

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  stringValue = null;

  myArray = [];


  isObjectCheck(obj: any): boolean {
    for (var key in this) {
      if (this.hasOwnProperty(key)) return false;
    }
    return true;
  }
}