用角6制作过滤管

Question

I am trying to make a filter pipe in angular6. So far I got this:

search.component.html:

<input class="form-control" [(ngModel)]="searchService.query.title" name="title">

search.component.ts:

import { Component, OnInit } from '@angular/core';
import { SearchDataService } from './search-data.service';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent {

  constructor(public searchService: SearchDataService) {
  }
}

search-data.service.ts:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SearchDataService {
  public query = {};
  constructor() { }
}

list.component.html:

<app-search></app-search>
<div>{{ searchService.query | json }}</div>
<div *ngIf="estates">
  <div *ngFor="let estate of estates | filter: searchService.query">
    <app-estates-estate [estate]="estate" [appClassSwitch]="'estate-details-list'"></app-estates-estate>
  </div>
</div>

If I change all this to just add a button to apply the filter (to assign the value from input to the service model) it works great. But if I do it the way it is shown here it does not refreshes the list with filters applied. I remember in angularjs that there were something like $rootScope.$digest so I tried to search something similar and I got to ApplicationRef and ChangeDetectorRef, but neither of these solved my case.

So question is how can I enforce the filter application so that it affects the list shown on screen?

Thanks

Answer 1

Angular 2+ does not have a default filter like angularjs has. You should create your own filter(pipes in angular 2+). Please refer the below code snippet

...
@pipe({
   name: "myCustomFilter",
   pure: false
})
export class MyCustomFilter implements PipeTransform {
   transform(input) {
      // Custom Logic 
      return output
    }
 }

Angular executes pure pipes only if any of the input changes... By default all pipes are pure... you should mark it as false... But this does comes with the cost of performance... please do take care

...
@NgModule({
  imports: [CommonModule],
  declaration: [MyCustomFilter]
})
export class SomeModule {}

Then use in templates as follows

<div *ngFor="let item of items | myCustomFilter: 'searchQuery'"> 
   {{item.name}}
</div>

For More info about pipes please verify this Angular.io

You can refer this repo which has lots of reusable pipes angular-pipes