angular2 Pipe expression on [ngClass] not working

Question

I have a Pipe to capitalize first letter in dynamic input string

@Pipe({
  name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {

transform(value: string, args: any[]): string {
if (value === null) return 'Not assigned';
return value.charAt(0).toUpperCase() + value.slice(1);
 }
}

Pipe is not accepting inside [ngClass] like

[ngClass]="data.color | capitalize"> // data.color is json input --> not capitalizing input string

<md-input-container>
    <input mdInput placeholder="Severity" value="{{ data.color }}" readonly>
    <md-icon [ngClass]="data.color+''|capitalize"></md-icon>
  </md-input-container>

When i print as {{data.color | capitalize}} it is working fine input = "name" prints as "Name". Any help would be great.

Answer 1

You can try this:

[ngClass]="data.color+'' | capitalize"

Instead of:

[ngClass]="data.color | capitalize"

And check if you pipe is declared in the declarations of your module. Plunker shows exact implementation.