Null Check in Value

Hi!

To display a hyphen when fMobileNo is null, update your TypeScript like this:

this.fMobileNo = this.fatherData?.phoneDetails.find((c: any) => c.phoneType === 'MOBILE') || null;

And in your HTML, use:

{{ fMobileNo || '-' }}

This will show a hyphen if fMobileNo is null. Hope that helps!

Hello Ramco,

You can make the below changes,

this.fMobileNo = this.fatherData?.phoneDetails?.find((c: any) => c.phoneType === 'MOBILE') ?? null;

html file :

{{ fMobileNo?.number ?? '-' }}

You can use the Elvis operator (also known as the nullish coalescing operator) in your HTML template to achieve this. Here's an example:

{{ fMobileNo ? fMobileNo : '-' }}

This will display the value of fMobileNo if it's not null or undefined, and a hyphen (-) if it is.

Alternatively, you can use a ternary operator:

{{ fMobileNo !== null ? fMobileNo : '-' }}

 

Both of these approaches will render a hyphen if fMobileNo is null or undefined.

If you want to handle this in your TypeScript code instead, you could do something like this:

if (this.fatherData && this.fatherData.phoneDetails) {
  this.fMobileNo = this.fatherData.phoneDetails.find((c:any) => c.phoneType === 'MOBILE');
  if (!this.fMobileNo) {
    this.fMobileNo = '-';
  }
}

Try this.

if (this.fatherData && this.fatherData.phoneDetails) {
  const mobile = this.fatherData.phoneDetails.find((c: any) => c.phoneType === 'MOBILE');
  this.fMobileNo = mobile ? mobile.number : null; // Assuming `number` is the property holding the phone number

}

HTML code

{{ fMobileNo || '-' }}

Try this

if (this.fatherData && this.fatherData.phoneDetails) {
  const mobile = this.fatherData.phoneDetails.find((c: any) => c.phoneType === 'MOBILE');
  this.fMobileNo = mobile ? mobile.phoneNumber : '-'; // Assuming mobile has a property 'phoneNumber'
}

Hello Ramco

Try the below code to check if null then show Hyphen

if (this.fatherData && this.fatherData.phoneDetails) {
  this.fMobileNo = this.fatherData.phoneDetails.some((c:any) => c.phoneType === 'MOBILE') ? this.fatherData.phoneDetails.find((c:any) => c.phoneType === 'MOBILE') : '-';
}

Thanks