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

If it's in TS why not just use a function instead of a pipe? Something like `` — Fussel, Dec 16 '19 at 08:14
because value of heading is numbers and you know css is not Acceptance number like `.12{}` — Ali Ghassan, Dec 16 '19 at 08:16
Does this answer your question? [Is it possible to use a pipe in the code?](https://stackoverflow.com/questions/35159079/is-it-possible-to-use-a-pipe-in-the-code) — Nicholas K, Dec 16 '19 at 08:20
[This](https://stackoverflow.com/questions/35144821/angular-use-pipes-in-services-and-components) is also helpful. — Nicholas K, Dec 16 '19 at 08:21
Maybe also post the code of your pipe because you are saying it returns css, in that case consider using `[ngStyle]`. Also note that `[ngClass]` and `[ngStyle]` expect objects as value. Like `[ngStyle]="{'width': someVar}"` — Fussel, Dec 16 '19 at 08:34

Felix Lemke · Accepted Answer · 2019-12-16T08:25:23.207

4

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)"/>

edited Dec 16 '19 at 08:25

answered Dec 16 '19 at 08:14

Felix Lemke

6,189
3
40
67

@AliGhassan `ngClass` wont be working because angular wont be rendering that part of code. Instead `Leaflet` injecting that template it self.. – Eldar Dec 16 '19 at 08:25
Thank you . you saved me . Name of css class now is showing in nglcass but he doesn't apply . any idea why ? See image [https://i.ibb.co/QP1X3gY/Capture.png] – Ali Ghassan Dec 16 '19 at 08:49
Can you try replacing `[ngClass]` by `class`? Please remove the square brackets, too. – Felix Lemke Dec 16 '19 at 08:51

score 1 · Answer 2 · answered Dec 16 '19 at 08:18

1

That's because you use ngClass='...' instead of [ngClass]='...'.

With the former, your string is passed as is without evaluation. With the latter (with []), your statement is actually evaluated - and the pipe will be taken into account.

answered Dec 16 '19 at 08:18

Qortex

7,087
3
42
59

l did that before but still same problem – Ali Ghassan Dec 16 '19 at 08:19
Then your pipe is not imported in your component's module – Qortex Dec 16 '19 at 08:46

score -2 · Answer 3 · answered Dec 16 '19 at 08:20

-2

use like this

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

Now pipe will return what have you have wanted.

answered Dec 16 '19 at 08:20

Brijesh

71
1
8

Angular : Using pipe inside ts not in html

3 Answers3