title: How can I fix the error "Error: The pipe 'filter' could not be found! Error: The pipe 'filter' could not be found! "In angular 10?
body: <p>I have a filter that when searching for a name brings me the data that contains that name, but it only sends me that error in the browser console.
  it just doesn't show me the page</p>
  <pre><code></code></pre>
  <p>html</p>
  <pre><code>&lt;div class=&quot;content&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;row&quot;&gt;
  &lt;div class=&quot;col-xs-12 col-sm-6 col-md-4&quot; style=&quot;padding-bottom: 15px;&quot; &gt;
  &lt;div class=&quot;card_book&quot;&gt;
  &lt;div class=&quot;card&quot;&gt;
   &lt;div class=&quot;card-body text-center&quot;&gt;
      &lt;form&gt;
      &lt;fieldset&gt;
            
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;filterPost&quot;  placeholder=&quot;Nombre&quot;  [(ngModel)]=&quot;filterPost&quot; &gt;
        &lt;br&gt;   
      &lt;/div&gt; 
    &lt;/fieldset&gt;     &lt;/form&gt;
    &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
       
          
      
          &lt;div class=&quot;container&quot;&gt;
              &lt;div class=&quot;row&quot;&gt;
     &lt;div class=&quot;col-xs-12 col-sm-6 col-md-4&quot; style=&quot;padding-bottom: 15px;&quot; *ngFor=&quot;let contacts of contacts | filtro:filterPost&quot;&gt;
       &lt;div class=&quot;card_book&quot;&gt;
         &lt;div class=&quot;card&quot;&gt;
           &lt;div class=&quot;card-body text-center&quot;&gt;
                        
                        &lt;h3 &gt;Nombre: {{contacts.name}}&lt;/h3&gt;
                        &lt;h5&gt;Edad: {{contacts.number}}&lt;/h5 &gt;
                        &lt;h5&gt;Email: {{contacts.email}}&lt;/h5&gt;
        &lt;h5 class=&quot;card-text&quot;&gt;Fecha de nacimiento: {{contacts.date}}&lt;/h5&gt;
        &lt;h6 style=&quot;color: red;&quot;&gt;Id: {{contacts.id}}&lt;/h6&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; (click)=&quot;generarPDF()&quot;&gt;
        &lt;img src=&quot;assets/img/descargar.png&quot;  alt=&quot;DESCARGAR PDF&quot; title=&quot;Descargar pdf&quot;&gt; DESCARGAR PDF
               
                        &lt;/button&gt;
                      
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;
        `````````
  </code></pre>
  <p>ts here only goes this</p>
  <pre><code>  filterPost = '';
  
       `````````
  </code></pre>
  <p>pipe
  I really don't know if the problem is here</p>
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({
    name: 'filtro'
  })
  export class FiltroPipe implements PipeTransform {
  
    transform(value: any, arg: any): any {
      if (arg === '' || arg.length &lt; 3) return value;
      const resultPosts = [];
      for (const post of value) {
        if (post.email.toLowerCase().indexOf(arg.toLowerCase()) &gt; -1) {
          resultPosts.push(post);
        };
      };
      return resultPosts;
    }
  
  }
  </code></pre>
  <p>It is already imported in module but I don't know why I get that error</p>
  <pre><code>import {FormsModule} from '@angular/forms';
  import { FiltroPipe } from './pipes/filtro.pipe'
  
  
  
  
  @NgModule({
    declarations: [
      FiltroPipe, 
    AppComponent,
    SendEmailComponent, 
    NavbarComponent,
    SidebarComponent,
    InactivityTimerComponent,
   
     ],
     
    imports: [
      BrowserModule,
      AppRoutingModule,
      ReactiveFormsModule,
      AngularFireModule.initializeApp(environment.firebaseConfig),
      AngularFirestoreModule,
      AngularFireAuthModule, FormsModule
    ],
    providers: [AuthService, CanPaginaPrincipalGuard, AngularFirestore,DataDbService, 
     
    
    ],
  
   
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>