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

Answer 1

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

Answer 2

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