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

We Are Going To Discuss About Angular 7: TypeError: Cannot read properties of undefined (reading ‘substr’). So lets Start this Angular Article.

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

How to solve Angular 7: TypeError: Cannot read properties of undefined (reading ‘substr’)

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.

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

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.

Solution 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.

Original Author Edunno Of This Content

Solution 2

above all add one condition

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

Original Author Indraraj26 Of This Content

Solution 3

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 
}

Original Author dt170 Of This Content

Conclusion

So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.

Also Read,

ittutorial team

I am an Information Technology Engineer. I have Completed my MCA And I have 4 Year Plus Experience, I am a web developer with knowledge of multiple back-end platforms Like PHP, Node.js, Python and frontend JavaScript frameworks Like Angular, React, and Vue.

Leave a Comment