If pipe returns the same result as previous time, the component is not updated

In order to explain the issue I created the following Plunkr:


There is a simple pipe that returns 'Yes' if the length of the passed string is greater than 5, otherwise returns 'No'.

  name: 'lengthMoreThan5'
export class LengthMoreThan5 implements PipeTransform {
  transform(value: string) {
      console.log('pipe ->', value)
      return value.length > 5 ? 'Yes' : 'No';

and in the component template, there is and Input with one way binding like this:

<input (blur)="onBlur($event)" [ngModel]="selectedValue | lengthMoreThan5" />

The value of the selectedValue property is updated in the onBlur event:

onBlur(evt) {
  this.selectedValue = evt.target.value;

The issue is that if the pipe returns the same result as previous time, the input text would not change.

So, if I put '123456' in the text box and leave, it changes to Yes, which is correct. Now if I come back to the text box and enter '123456' again and leave, this time it does not change.

Edit: I created another Plunkr to explain the issue better, I hope :) https://plnkr.co/edit/PenjwfTCXlg4uB8f6mfl

1 answer

  • answered 2018-03-13 20:54 Nikolay Zatonatskiy

    I understand that your question is about pipe and so on...

    But you could do what you want like this:

    //our root app component
    import {Component, NgModule, VERSION, ChangeDetectorRef, ViewChild, ElementRef } from '@angular/core'
    import {BrowserModule} from '@angular/platform-browser'
    import { FormsModule } from '@angular/forms';
      selector: 'my-app',
      template: `
          <input #inp (blur)="onBlur($event)"/>
    export class App {
      @ViewChild('inp') selectedValue: ElementRef;
      constructor(private cd: ChangeDetectorRef) {
      onBlur(evt) {
        this.selectedValue.nativeElement.value = this.checkValue(evt.target.value);
      checkValue(value) {
        return value.length > 5 ? 'Yes' : 'No';
      imports: [ BrowserModule, FormsModule ],
      declarations: [ App ],
      bootstrap: [ App ]
    export class AppModule {}

    It could be done without pipe.

    Here is plnkr: https://plnkr.co/edit/OZEDq1T21MaJnY54yCql?p=preview

    ps: please don't downgrade if i did not guess what you want )