2

I have a Pipe just for Example that Squares the value that it receives this below one works fine

Template 

<input type = "number" placeholder = "Enter number for which square is to be calculated" [(ngModel)] = "value">
  <p>Squared Number is using pipe Transform  {{value | square}} </p>

Component

value = 2;

Custom Pipe 

import { Pipe,PipeTransform } from '@angular/core';

@Pipe({
    name:'square'
})

export class SquarePipe implements PipeTransform{
  transform(value: number, args?: number[]): number {
    return Math.pow(value, 2);
  }

}

But when i try to use the template like this

it doesn't work I need to know why ?

<input type = "number" placeholder = "Enter number for which square is to be calculated" #value>
  <p>Squared Number is using pipe Transform  {{value | square}} </p>
Improve this question
6
  • Have you some console errors? Commented Mar 8, 2017 at 12:43
  • @JaroslawK. No errors the Pipe won't work Commented Mar 8, 2017 at 12:44
  • What does "doesn't work mean exactly"? Commented Mar 8, 2017 at 12:45
  • @GünterZöchbauer Doesn't work means the Pipe fails to do its job of filtering in the view and no error also in the console Commented Mar 8, 2017 at 12:48
  • What happens? Have you tried to just return value; in transform()? What do you mean with "local Template variable"? A template variable usually is <div #myTemplateVar></div> Commented Mar 8, 2017 at 12:51

1 Answer 1

Reset to default
1

I guess what you want is

<p>Squared Number is using pipe Transform  {{value.value | square}} </p>

value alone refers to the HTMLInputElement

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments