I have and angular 7.1.4 app that piles 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, pleteWords = false, ellipsis = '...') {
    if (pleteWords) {
      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?

I have and angular 7.1.4 app that piles 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, pleteWords = false, ellipsis = '...') {
    if (pleteWords) {
      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?

• javascript
• angular
• typescript
• angular7

• Try value?.substr instead of value.substr – Merna Mustafa Commented Jan 31, 2022 at 9:58

3 Answers 3

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, pleteWords = false, ellipsis = '...') {
    if(value){
       if (pleteWords) {
          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.

above all add one condition

if(value){
....your code
}

Before using value you should check if its undefined look at the following example:

function:

public validateText(text: string) {
  return text;
}

Calling this function now will cause error:

const text = 'just an example' as string | undefined; 

validateText(text);

error:

TS2322: Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.

In your case you should check value before calling the function or inside it before substr or be more specific like so:

if (typeof value === 'string') {
//Your code 
}

// OR in short 

if (value) {
//Your code 
}