I'm defining a pipes example in my application, which transforms the uppercase string to lowercase ex: 'Activities' => 'activities'. And the data is in the Array format and I am applying this filter on *ngFor. It returns me an error saying 'toLowerString is not a function', Please help me understand where I am going wrong.

Demo link

I'm defining a pipes example in my application, which transforms the uppercase string to lowercase ex: 'Activities' => 'activities'. And the data is in the Array format and I am applying this filter on *ngFor. It returns me an error saying 'toLowerString is not a function', Please help me understand where I am going wrong.

Demo link

• javascript
• angular
• pipe

Share Improve this question Follow edited Feb 22, 2019 at 6:35 TheParam 10.6k44 gold badges4343 silver badges5454 bronze badges asked Feb 22, 2019 at 5:59 Soujanya JSoujanya J 12111 gold badge33 silver badges1212 bronze badges 5

• 3 Why don't you simply use the pre-defined pipe in angular for lowercase ? Example : let caption of captions | lowercase – Thanveer Shah Commented Feb 22, 2019 at 6:04
• @SoujanyaJ i think you need to {{ Abc | lowercase}} check this stackblitz./edit/… – Abhishek Commented Feb 22, 2019 at 6:08
• @ThanveerShah got it right, here is the link, angular.io/api/mon/LowerCasePipe#lowercasepipe – Nik Commented Feb 22, 2019 at 6:13
• @Soujanya - you should use pre-defined pipe like {{option | lowercase}} rather than creating plex pipe over array. make your project simple and faster – Hardik Gondalia Commented Feb 22, 2019 at 6:14
• Thank you for all your responses, I am actually trying to build a table ponent. And I wanted to transform the col to lowercase is to map to my dataset, so as to construct records. Can you please have a look at the updated source code. – Soujanya J Commented Feb 22, 2019 at 7:36

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

<li *ngFor="let caption of captions">
    {{caption | lowercase }}
</li>

<li *ngFor="let caption of captions">
    {{caption | uppercase }}
</li>

<li *ngFor="let caption of captions">
    {{caption | titlecase }}
</li>

You have to apply your custom pipe like below it will work.

 <ul>
        <li *ngFor="let caption of captions ">
            {{caption | stringLowerCase }}
        </li>
    </ul>

And in your pipe return after value tranform like below.

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

@Pipe({ 
    name: 'stringLowerCase' 
})
export class LowerCasePipe implements PipeTransform {
    transform(value: string) {
        console.log(value.toString().toLowerCase());
        return value.toLowerCase();
    }
}

Here is forked solution

You can not use value.toLowerCase(), because value seems tobe an array not a string. So The value must be type Array not string and you must return an array not console.log. try this:

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

@Pipe({ 
    name: 'stringLowerCase' 
})
export class LowerCasePipe implements PipeTransform {
    transform(value: Array<string>) {
      return value.map((x)=>{ return x.toLowerCase() })
    }
}

Notice that .toLowerCase() is usable only on string data type. Which to said you need to make sure that the data was a string with: .toString()

value.toString().toLowerCase()

With that being said as Thanveer Shah have been said in the ment you can use | lowercase which are inbuilt to transform into a string.

See Fork for both versions being in used.

---

Clarification: Intentionally used the following code:

export class LowerCasePipe implements PipeTransform {
  transform(value) {
    console.log(value.toString().toLowerCase());
    for (let i = 0; i < value.length; i++) {
      value[i] = value[i].toString().toLowerCase();
    }
    return value;
  }
}

to show that the data was an array.

But if you already understand that it was an array you could simply use:

export class LowerCasePipe implements PipeTransform {
 transform(value: Array<string>) {
      return value.map((x)=>{ return x.toLowerCase() })
    }
}

as in the other answer by Ferhad Othman.

<li *ngFor="let caption of captions">
    {{caption | lowercase }}
</li>