Implementing Search with Angular 4

Question

Look at the picture

The user will type in the title field to perform a search in the table, but an error appears in the browser console

The error message informs that the problem is in the search method in the HTML file, right here;

 <form autocomplete="off" (ngSubmit)="pesquisar()">

The complete code is here;

<div class="centro">
  <div class="ui-g">

    <form autocomplete="off" (ngSubmit)="pesquisar()">



      <div class="ui-g-12 ui-fluid">
        <label>Título</label>
        <input pInputText type="text" name="titulo"
        [(ngModel)]="titulo">
      </div>

      <div class="ui-g-12">
        <label style="display: block">Fonte</label>
        <input pInputText type="text" style="width: 200px" name="font"
      >

      </div>

      <div class="ui-g-12">
        <button pButton type="submit" label="Pesquisar"></button>
      </div>

    </form>
</div>

  <div class="ui-g">
    <div class="ui-g-12">

      <p-dataTable [value]="noticias" [paginator]="true" [rows]="5"
      [responsive]="true">

   <p-column field="dataNoticia" header="Data da noticia" styleClass="col-data">
        <ng-template let-lanc="rowData" pTemplate="body">
          <span>{{ lanc.dataNoticia | date:'dd/MM/yyyy' }}</span>
        </ng-template>
      </p-column>
      <p-column field="titulo" header="Titulo"></p-column>
       <p-column field="font" header="Fonte" styleClass="col-valor"></p-column>
          <p-column styleClass="col-acoes">
              <ng-template let-lanc="rowData" pTemplate="body">
                <button pButton icon="fa-angle-double-right"
                pTooltip="Visualize" tooltipPosition="top"
                ></button>
              </ng-template>
            </p-column>
      </p-dataTable>

    </div>


  </div>

</div>

I need to fix the problem, I think it may be in the component or in service.

Component

titulo: string;
  noticias = [];

  constructor(private noticiaService: NoticiaService) { }

  ngOnInit() {
     this.pesquisa();
  }


  pesquisa() {
      this.noticiaService.pesquisar({ titulo: this.titulo })
      .subscribe(noticias => this.noticias = noticias);
  }

Service

import { Noticia } from './../core/model';

import { Http,  URLSearchParams } from '@angular/http';
import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';

export interface NoticiaFiltro {
  titulo: string;

}

@Injectable()
export class NoticiaService {

  noticiasUrl = 'http://localhost:8080/noticias';


  constructor(private http: Http) { }

  pesquisar(filtro: NoticiaFiltro): Observable <Noticia[]> {

    const params = new URLSearchParams();


    if (filtro.titulo) {
      params.set('titulo', filtro.titulo);
    }

    return this.http.get(`${this.noticiasUrl}`, {search: params})
      .map( response => response.json().content);

  }


}

Answer 1

In html you are calling search and in the component the name of the search method