Unraveling Angular 2 book, Chapter 1, Example 5

by

You have a pure pipe so

its method transform will be executed only when it detects a pure
change to the input value.

For your case 

*ngFor="let dive of dives | contentFilter:searchBox.value"

the input value will be dives and searchBox.value

According to the angular2 guide on pipes:

A pure change is either a change to a primitive input value
(String, Number, Boolean, Symbol) or a changed object reference (Date,
Array, Function, Object).

  • When a dive is added, the array reference (dives) isn’t changed – hence transform method is not executed.
  • When something is typed into the filter input, searchBox.value does change – hence transform is executed.

So one of possibles solutions is to have always a new reference array each time a div is added:

Just replace:

this.dives.push(this._stockDives[this._index++]);

with:

this.dives = this.dives.concat(this._stockDives[this._index++]);

or:

this.dives = [...this.dives, this._stockDives[this._index++]];

Second way to do it working is use impure pipe:

@Pipe({name: 'contentFilter', pure: false })

More Related Contents:

  1. How do I return the response from an Observable/http/async call in angular?
  2. How to load external scripts dynamically in Angular?
  3. Property ‘…’ has no initializer and is not definitely assigned in the constructor
  4. Angular 2 Sibling Component Communication
  5. JS : Convert Array of Strings to Array of Objects
  6. Angular: Can’t find Promise, Map, Set and Iterator
  7. Angular 4.3.3 HttpClient : How get value from the header of a response?
  8. Angular 2 router event listener
  9. In Angular, how do you determine the active route?
  10. Angular2 component’s “this” is undefined when executing callback function
  11. Angular 2: TypeError: l_thing0 is undefined in [{{thing.title}} in AppComponent@4:44]
  12. Angular 4 pass data between 2 not related components
  13. Load existing components dynamically Angular 2 Final Release
  14. Angular: In which lifecycle hook is input data available to the Component
  15. Call a function on click event in Angular 2
  16. Angular 4 Filter Search Custom Pipe
  17. Correct way Provide DomSanitizer to Component with Angular 2 RC6
  18. Angular 2 typescript invoke javascript function
  19. How to Pass data from child to parent component Angular
  20. Angular2 too many file requests on load
  21. What does Angular 2 hashtags in template mean?
  22. Generate dynamic css based on variables angular
  23. Angular 6: ERROR TypeError: “… is not a function” – but it is
  24. Angular interceptor exclude specific urls
  25. Angular 8 – Lazy loading modules : Error TS1323: Dynamic import is only supported when ‘–module’ flag is ‘commonjs’ or ‘esNext’
  26. How to iterate using ngFor loop Map containing key as string and values as map iteration
  27. Plain Javascript as Angular 2 service
  28. How to check empty object in angular 2 template using *ngIf
  29. Google Sign-In for Websites and Angular 2 using Typescript
  30. Filter Array in Array by date between 2 dates

Leave a Comment