title: Angular Filtering: Problem when Clearing Search Box
body: <p>I Have a list of objects that i'm displaying, and i added a search box to filter a column, now when i enter a value, it works fine and the data is filtered.
  The problem is, when i clear the search box, i don't get all the data back, i stay stuck with what i searched first, so i have to refresh every time i want to change the entered value or get the whole list.</p>
  <p>Here's my Ts Code :</p>
  <pre><code>export class AdherentsComponent implements OnInit {
    adherents: adherent[];
    name: string;
  
    constructor(private adherentService: AdherentService, private alertify: AlertifyService) { }
  
    ngOnInit() {
      this.getAdherents();
      this.name = &quot;&quot;;
    }
  
    getAdherents() {
      this.adherentService.getAdherents().subscribe((
        adherents: adherent[]) =&gt; {
        this.adherents = adherents;
      }, error =&gt; { this.alertify.error(error); })
    }
  
    
  
    Search() {
      if (this.name.length &gt; 0) {
        this.adherents = this.adherents.filter(res =&gt; {
          return res.nomcomplet.toLowerCase().match(this.name.toLowerCase());
        })
      }
      else if (this.name.length === 0) {
        this.adherents = this.adherents;
        console.log(this.adherents.length);
      }
    }
  
  
  
  }
  </code></pre>
  <p>Here's my Html Code :</p>
  <pre><code>&lt;body &gt;
  &lt;main role=&quot;main&quot; class=&quot;container&quot; &gt;
  &lt;div  class=&quot;jumbotron&quot; style=&quot;background-color: white;&quot;&gt;
    &lt;h2&gt;Liste des Adhérents&lt;/h2&gt;
    &lt;input type=&quot;text&quot; [(ngModel)]=&quot;name&quot; (input)=&quot;Search()&quot; /&gt;  
    &lt;table class=&quot;table table-hover&quot;&gt;
      &lt;thead class=&quot;thead-light&quot;&gt;
  &lt;tr&gt;
     &lt;th&gt;Nom Complet&lt;/th&gt;
     &lt;th&gt;Grade&lt;/th&gt;
     &lt;th&gt;Poste&lt;/th&gt;
     &lt;th&gt;Telephone&lt;/th&gt;
     &lt;th&gt;E-mail&lt;/th&gt;
     &lt;th&gt;&lt;/th&gt;
   &lt;/tr&gt;
   &lt;/thead&gt;
  
       &lt;tr *ngFor=&quot;let item of adherents&quot;&gt;
         &lt;td&gt;{{item.nomcomplet}}&lt;/td&gt;
         &lt;td&gt;{{item.grade}}&lt;/td&gt;
         &lt;td&gt;{{item.poste}}&lt;/td&gt;
         &lt;td&gt;{{item.telephone}}&lt;/td&gt;
         &lt;td&gt;{{item.email}}&lt;/td&gt;
         &lt;td&gt;&lt;button [routerLink]=&quot;['/adherents/', item.id]&quot; style=&quot;margin-right: 0.2em;&quot; title=&quot;Details&quot; class=&quot;btn-sm btn-secondary text-white&quot;&gt;&lt;i class=&quot;fa fa-eye&quot;&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;button [routerLink]=&quot;['/adherentEdit/', item.id]&quot;
          style=&quot;margin-right: 0.2em;&quot; title=&quot;Modifier&quot; class=&quot;btn-sm btn-primary text-white&quot;&gt;&lt;i class=&quot;fa fa-edit&quot;&gt;&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;
       &lt;/tr&gt;
     &lt;/table&gt;
  
     
  &lt;/div&gt;
  &lt;/main&gt;
  &lt;/body&gt;
  
  </code></pre>
  <p>Please how can i modify The Search() Function  so i can dynamically get data from the Array when changing the value in the search box input ?</p>