why Custom Pipe Doesn't work with local Template variables in Angular 2

Question

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>

@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 — user7161814
– user7161814, 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> — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 8, 2017 at 12:51

Günter Zöchbauer · Accepted Answer · 2017-03-08 12:54:02Z

1

I guess what you want is

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

value alone refers to the HTMLInputElement

answered Mar 8, 2017 at 12:54

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

Collectives™ on Stack Overflow

why Custom Pipe Doesn't work with local Template variables in Angular 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related