title: Typing in a input text is very slow using angular 4
body: <p>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 <code>ngFor</code> 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 ?</p>
  
  <pre><code>&lt;div class="width_products  products-animation " *ngFor="let product of productsService.products ; trackBy: $index"  [ngClass]="{ 'width_products_open_menu':productsService.status_menu  }" &gt;
    &lt;span class="each_width_product" &gt;
      &lt;div  class="title_products more_detail_product" (click)="set_router({ path:product['company'].company_name+'/'+product.product_title , data:product.product_id , relative:true })"&gt;
        {{product.product_title }}
        &lt;span class="glyphicon glyphicon-chevron-down"&gt;&lt;/span&gt;&lt;br&gt;
        &lt;div class=' glyphicon glyphicon-time'&gt;&lt;/div&gt; {{product.product_date}}
      &lt;/div&gt;
      &lt;div class="image_product_primary " (click)="set_router({ path:product['company'].company_name+'/'+product.product_title , data:product.product_id , relative:true })"&gt;
        &lt;img class="image_product" src="../../assets/images/products_image/{{product.product_image}}"&gt;
      &lt;/div&gt;
      &lt;button  (click)="product.product_in_wishList='true'; productsService.add_wish_list( product )" mat-button class="wish_list  notCloseDropdawnFavorite notCloseDropdawnCard"&gt;
        &lt;span class="write_add_wish"&gt;{{dataservices.language.add_wishlist}}&lt;/span&gt;
        &lt;mat-icon *ngIf="product.product_in_wishList == 'false' " class="notCloseDropdawnFavorite notCloseDropdawnCard"&gt;favorite_border&lt;/mat-icon&gt;
        &lt;mat-icon  *ngIf="product.product_in_wishList == 'true' " class="hearts_div_hover notCloseDropdawnFavorite notCloseDropdawnCard"&gt;favorite&lt;/mat-icon&gt;
      &lt;/button&gt;
      &lt;div class="footer_products"&gt;
        &lt;span matTooltip="Views!"&gt;
          &lt;div class="button_footer_products"&gt;
            &lt;span class="glyphicon glyphicon-eye-open icon_eye"&gt;&lt;/span&gt;
            &lt;div class="both_write "&gt;
              12889
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/span&gt;
        &lt;span matTooltip="Add to your card"  class="notCloseDropdawnCard notCloseDropdawnFavorite " (click)="product.product_in_cartList='true'; productsService.add_cart_list( product )"&gt;
          &lt;div class="button_footer_products"&gt;
            &lt;span *ngIf="product.product_in_cartList=='false'" class="glyphicon glyphicon-plus icon_eye notCloseDropdawnCard notCloseDropdawnFavorite" &gt;&lt;/span&gt;
            &lt;span *ngIf="product.product_in_cartList=='true'" class="glyphicon glyphicon-ok icon_eye notCloseDropdawnCard notCloseDropdawnFavorite" &gt;&lt;/span&gt;
            &lt;div class="both_write "&gt;
              Cart
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/span&gt;
        &lt;span matTooltip="See Details!"&gt;
          &lt;div (click)="set_router({ path:product['company'].company_name+'/'+product.product_title , data:product.product_id , relative:true })" class="button_footer_products" &gt;
            &lt;span class=" glyphicon glyphicon-option-horizontal icon_eye"&gt;&lt;/span&gt;
            &lt;div class="both_write "&gt;
              More
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="prise_products"&gt;
        Price:&lt;del&gt;$2500&lt;/del&gt; $3500
      &lt;/div&gt;
      &lt;div class="plus_height"&gt;&lt;/div&gt;
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In header component I have a input type text as below :</p>
  
  <pre><code>&lt;input type="text" class="kerkim"  name="search" [(ngModel)]="typing_search" placeholder=" 
           {{dataservices.language.searchproducts}}"&gt;
  </code></pre>