Angular 7: TypeError: Cannot read properties of undefined (reading 'substr')

Question

I have and angular 7.1.4 app that compiles successfully but when I open the console in my browser I see this error:

ERROR TypeError: Cannot read properties of undefined (reading 'substr')           core.js:14597 
at TruncatePipe.push../src/app/_services/truncate.ts.TruncatePipe.transform (truncate.ts:11:21)

If I understand this properly there is something wrong with the bellow code in my truncate.ts file. Here is my code:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 25, completeWords = false, ellipsis = '...') {
    if (completeWords) {
      limit = value.substr(0, limit).lastIndexOf(' ');
    }
    return `${value.substr(0, limit)}${ellipsis}`;
  }
}

I am not sure what is wrong here? Any thoughts what could be wrong?

Answer 1

Indraraj26 is pointing out that you should wrap your code in a check-value before executing.

If value is ever null, you cannot take a substring of it, so in order to avoid this scenario, you should check if value != null or "". You can do that simply in Angular by using

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 25, completeWords = false, ellipsis = '...') {
    if(value){
       if (completeWords) {
          limit = value.substr(0, limit).lastIndexOf(' ');
       }
       return `${value.substr(0, limit)}${ellipsis}`;
    }
  }
}

The if-statement will be false for null, and prevent your code from running and thus failing.