stringLowerCase filter to apply on ngFor

Question

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

Why don't you simply use the pre-defined pipe in angular for lowercase ? Example : let caption of captions | lowercase — Thanveer Shah, Feb 22 '19 at 06:04
@SoujanyaJ i think you need to `{{ Abc | lowercase}}` check this https://stackblitz.com/edit/angular-xu5e8s?file=src%2Fapp%2Fapp.component.ts — Abhishek, Feb 22 '19 at 06:08
@ThanveerShah got it right, here is the link, https://angular.io/api/common/LowerCasePipe#lowercasepipe — Nik, Feb 22 '19 at 06:13
@Soujanya - you should use pre-defined pipe like {{option | lowercase}} rather than creating complex pipe over array. make your project simple and faster — Ubiquitous Developers, Feb 22 '19 at 06:14
Thank you for all your responses, I am actually trying to build a table component. 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, Feb 22 '19 at 07:36

score 4 · Answer 1 · edited Oct 18 '21 at 15:36

4

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

edited Oct 18 '21 at 15:36

Gel

2,866
2
18
25

answered Feb 22 '19 at 06:15

Jalu Jay

168
1
4

Thank you for all your responses, I am actually trying to build a table component. And I wanted to transform the col to lowercase is to map to my dataset, so as to construct records. Please find the updated source code. – Soujanya J Feb 22 '19 at 07:25
I was looking for `titlecase` I saw it in docs - I added it there. It might help someone. – Gel Oct 18 '21 at 15:36

ferhado · Answer 2 · 2019-02-22T06:28:27.543

1

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() })
    }
}

edited Feb 22 '19 at 06:28

answered Feb 22 '19 at 06:12

ferhado

2,363
2
12
35

There is already `lowercase` pipe exist; then why bother :-) https://angular.io/api/common/LowerCasePipe#lowercasepipe – mumair Feb 22 '19 at 06:14
In this link is used by expression not *ngFor – ferhado Feb 22 '19 at 06:16
I mean after *ngFor ecentually result is supposed to be printed in template `{{output}}`, so then simple pipe will work fine in that case. rather create pipe and register in module so provide in further dependencies – mumair Feb 22 '19 at 06:20
I know, but I answered his question, I solved what he is trying to do. – ferhado Feb 22 '19 at 06:24

score 1 · Answer 3 · answered Feb 22 '19 at 06:15

1

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

answered Feb 22 '19 at 06:15

TheParam

10,113
4
40
51

why not use built in `lowercase` pipe :) – mumair Feb 22 '19 at 06:17
yes but he might do some extra string operation then custom pipe is more useful – TheParam Feb 22 '19 at 06:19

Mukyuu · Accepted Answer · 2019-02-22T07:54:07.590

0

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

edited Feb 22 '19 at 07:54

answered Feb 22 '19 at 06:05

Mukyuu

6,436
8
40
59

thank you so much, I got your point, but I am actually trying to build a table component. 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 Feb 22 '19 at 07:34
Simple. Just implement my method there see the [forked update](https://stackblitz.com/edit/angular-st1ujz?file=src/app/lower-case.pipe.ts) – Mukyuu Feb 22 '19 at 07:37
I got the needed output, Small question, when I am already in a loop i.e NgFor, what is the need to add another for loop in the pip transform function? We could just pass the text param and convert into lowercase and send it back. I didn't get the reason behind this. – Soujanya J Feb 22 '19 at 07:47
There is no real need honestly. It just to make it easier for you to know that the datatype was actually an array. – Mukyuu Feb 22 '19 at 07:48
@Mykyuu I will be happy to know the reason. – Soujanya J Feb 22 '19 at 07:50

score 0 · Answer 5 · answered Feb 22 '19 at 07:10

0

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

answered Feb 22 '19 at 07:10

Prashanthi

145
5

While this code might be the solution, as a good answer it really needs an explanation of why it works. – Richard Feb 22 '19 at 09:11

stringLowerCase filter to apply on ngFor

5 Answers5