Failed in implementing Angular Custom Filter pipe

Question

I have created a custom filter type, to filter the notes-list in my application, each note has a 'title' and 'message'.

I don't know where am doing wrong, there are no errors, but the pipe is not working.

I tried out to figure out what's going wrong, but haven't succeeded.

Can anyone please help me with this. Thank you.

search.pipe.ts

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  transform(value:Note[], sName:string): any[] {
    if(!value){
      return null;
    }
    if(!sName){
      return value;
    }
      let relevantNotes=value.filter(note=>{
        if(note.message.toLowerCase().includes(sName) || note.title.toLowerCase().includes(sName)){
          return true;
        }
        return false;
      })
    return relevantNotes;
    }
}

notes-list.component.ts

export class NotesListComponent implements OnInit {

  notes:Note[]=new Array<Note>();
  filterNote:string;

  constructor(private noteService:NotesService) { }

  ngOnInit(){
    this.notes=this.noteService.getAll();
  }

  delete(id:number){
    this.noteService.delete(id);
  }

notes-list.component.html

<div class="main-container">
    <div class="search-bar-container">
        <div class="field">
            <p class="control has-icons-left">
              <input class="input" type="text"  placeholder="Filter" [ngModel]="filterNote"> <!--(keyup)="filter($event.target.value)"-->
              <span class="icon is-small is-left">
                <i class="fas fa-search"></i>
              </span>
            </p>
          </div>
    </div>
    <div class="notes-list">
        <app-note-card *ngFor="let note of notes | search:filterNote;index as i"
        [link]="i"
        (delete)="delete(i)"
        [title]="note.title"
        [message]="note.message"> <!--filteredNotes-->
      </app-note-card>
    </div>
    <button class="button floating-add-button is-primary" routerLink="new">Add</button>
</div>

Answer 1

[ngModel]="filterNote" is a one way binding. it binds filterNote value to input, not vice versa. you can change it to two way binding so that filterNote would be updated when input value is changed: [(ngModel)]="filterNote". Or leverage the keyup event: (keyup)="filterNote = $event.target.value".