When I type in text to search something, displaying one character in text is very slow. 
What is the problem ?
I have display 50 products with `ngFor` as below , if I display more than 50 products 100 or 150 typing in text is more slow.
what should I do to fix this problem ?

```
<div class="width_products  products-animation " *ngFor="let product of productsService.products ; trackBy: $index"  [ngClass]="{ 'width_products_open_menu':productsService.status_menu  }" >
  <span class="each_width_product" >
    <div  class="title_products more_detail_product" (click)="set_router({ path:product['company'].company_name+'/'+product.product_title , data:product.product_id , relative:true })">
      {{product.product_title }}
      <span class="glyphicon glyphicon-chevron-down"></span><br>
      <div class=' glyphicon glyphicon-time'></div> {{product.product_date}}
    </div>
    <div class="image_product_primary " (click)="set_router({ path:product['company'].company_name+'/'+product.product_title , data:product.product_id , relative:true })">
      <img class="image_product" src="../../assets/images/products_image/{{product.product_image}}">
    </div>
    <button  (click)="product.product_in_wishList='true'; productsService.add_wish_list( product )" mat-button class="wish_list  notCloseDropdawnFavorite notCloseDropdawnCard">
      <span class="write_add_wish">{{dataservices.language.add_wishlist}}</span>
      <mat-icon *ngIf="product.product_in_wishList == 'false' " class="notCloseDropdawnFavorite notCloseDropdawnCard">favorite_border</mat-icon>
      <mat-icon  *ngIf="product.product_in_wishList == 'true' " class="hearts_div_hover notCloseDropdawnFavorite notCloseDropdawnCard">favorite</mat-icon>
    </button>
    <div class="footer_products">
      <span matTooltip="Views!">
        <div class="button_footer_products">
          <span class="glyphicon glyphicon-eye-open icon_eye"></span>
          <div class="both_write ">
            12889
          </div>
        </div>
      </span>
      <span matTooltip="Add to your card"  class="notCloseDropdawnCard notCloseDropdawnFavorite " (click)="product.product_in_cartList='true'; productsService.add_cart_list( product )">
        <div class="button_footer_products">
          <span *ngIf="product.product_in_cartList=='false'" class="glyphicon glyphicon-plus icon_eye notCloseDropdawnCard notCloseDropdawnFavorite" ></span>
          <span *ngIf="product.product_in_cartList=='true'" class="glyphicon glyphicon-ok icon_eye notCloseDropdawnCard notCloseDropdawnFavorite" ></span>
          <div class="both_write ">
            Cart
          </div>
        </div>
      </span>
      <span matTooltip="See Details!">
        <div (click)="set_router({ path:product['company'].company_name+'/'+product.product_title , data:product.product_id , relative:true })" class="button_footer_products" >
          <span class=" glyphicon glyphicon-option-horizontal icon_eye"></span>
          <div class="both_write ">
            More
          </div>
        </div>
      </span>
    </div>
    <div class="prise_products">
      Price:<del>$2500</del> $3500
    </div>
    <div class="plus_height"></div>
  </span>
</div>

```

In header component I have a input type text as below :

```
<input type="text" class="kerkim"  name="search" [(ngModel)]="typing_search" placeholder=" 
         {{dataservices.language.searchproducts}}">

```