Angular : Using pipe inside ts not in html

Question

I have a pipe that returns a css string depending on value coming form data json .

Main components

this.coords.push(new L.Marker([i.lat, i.lng], {
  rotationAngle: i.heading,
  rotationOrigin: 'bottom center',
  icon: new L.DivIcon({
    html: `<div style="width: 65px;";>
             <img src="assets/icon/airplan.jpg" style="width: 20px;height: 25px;" ngClass='${i.heading}| heading'/>
           </div>`
  })
}).addTo(this.map)

The problem is when i run my project l get only same output of pipe name , l mean looks like pipe doesn't work ! Output

<img src="assets/icon/airplan.jpg" style="width: 20px;height: 25px;" ngclass="272|heading">

Any idea please

Answer 1

Have you tried using the ngClass without the ${} brackets?

[ngClass]='i.heading | heading'

Otherwise you can run the pipe inside the component class:

You can inject your pipe inside the constructor and run the transform function

@Component({...})
export class MyComponent {
  constructor(private headingPipe: HeadingPipe) {}

  transformedHeading(heading: string) {
    return this.headingPipe.transform(heading);
  }
}

and in your template

<img [ngClass]="transformedHeading(i.heading)"/>