title: how to use large array with ngfor in angular 5
body: <p>When i display more than 100 products with ngfor page is very slow.
  Is there any problem about  performance on browser   if call a method inside ngFor with one hundred items  or  set a lot of elements inside ngFor for one item?</p>
  
  <p>here is my  typescript code that i get some products from server with http post request</p>
  
  <pre><code>public  products:any = [] ;
  
  constructor(
    private setRouter: SetRouterService,
    private header :HeaderService,
    private cdr:  ChangeDetectorRef,
    private router : Router,
    private crypto:EncryptDecryptService ,
    private dataservices: DataService ,
    private Httpservice :HttpService ,
    private route: ActivatedRoute
  ) {
  
  
  this.dataservices.update_loader(true);
  
  this.dataservices.create_object_request( 'products', { 'type': 'default', 'number_click': 1 }  );
  
  this.my_products = this.Httpservice.Http_Post( this.dataservices.object_request ) // make request ......
  
      .subscribe( //  take success
  
          data =&gt; {
  
            if ( data['status'] == 'product' ) {
  
              this.products = data['data']['products'];
  
              this.build_pages_link( data['data']['pages_details']);
  
              this.dataservices.update_loader(false);
  
            }
          },
          error =&gt; console.log( error['data'] ) // take error .....
  
      );
  
  
  }
  </code></pre>
  
  <p>here is my html code that i display products with ngFor</p>
  
  <pre><code>  &lt;div class="width_products  products-animation " *ngFor="let product of products ; let i = index"  [ngClass]="{ 'width_products_open_menu':header.status_menu  }" &gt;
  
        &lt;div 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;/div&gt;
  
  
            &lt;div class="dropdown_products"&gt;
  
                &lt;span class="glyphicon glyphicon-chevron-down"&gt;&lt;/span&gt;
  
            &lt;/div&gt;
  
            &lt;div class="date_products"&gt;
  
                &lt;span class='glyphicon glyphicon-time'&gt;&lt;/span&gt; {{product.product_date}}
  
            &lt;/div&gt;
  
            &lt;div class="image_profile_company " (click)="set_router({ path:product['company'].company_name , data: product['company'].company_id , relative:true })"&gt;
  
                &lt;img  class="image_prof_admin" src="../../assets/images/products_image/{{product['company'].company_image}}"&gt;
  
            &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 img_primary_product{{product.product_id}}" src="../../assets/images/products_image/{{product.product_image}}"&gt;
  
            &lt;/div&gt;
  
            &lt;div class="wish_list hover_all_wish notCloseDropdawnFavorite notCloseDropdawnCard" (mouseleave)="mouseLeave_wish( product )"  (mouseenter) ="mouseHover_wish( product ,i )"  id="wish_list{{product.product_id}}" (click)="header.add_wish_list( product )" [ngClass]="{'wish_list_hover': product_properties.index_product == i }"&gt;
  
            &lt;/div&gt;
  
            &lt;div class="about_wish" &gt;
  
                &lt;div class="wish_list_write"&gt;
  
                    &lt;div class="plus_icon"&gt;{{dataservices.language.add_wishlist}}&lt;/div&gt;
  
                &lt;/div&gt;
  
                &lt;div class="wish_list_icon"&gt;
  
                    &lt;button mat-mini-fab class="button_heart"  &gt;
  
                        &lt;div *ngIf="header.wish_properties.wishList.length &gt; 0; else  emtyWish " &gt;
  
                            &lt;div *ngIf="check_wish( product ) ; else notinwish"&gt;
  
                                &lt;mat-icon&gt;favorite&lt;/mat-icon&gt;
  
                            &lt;/div&gt;
  
                            &lt;ng-template #notinwish &gt;
  
                                &lt;mat-icon class="notCloseDropdawnFavorite notCloseDropdawnCard"  [ngClass]="{'hide_border_heart'  : product_properties.hover_wish_list &amp;&amp; product_properties.index_product == i } "&gt;favorite_border&lt;/mat-icon&gt;
  
                                &lt;mat-icon class="hearts_div_hover notCloseDropdawnFavorite notCloseDropdawnCard" [ngClass]="{'show_full_heart'  : product_properties.hover_wish_list &amp;&amp; product_properties.index_product == i } "&gt;favorite&lt;/mat-icon&gt;
  
                            &lt;/ng-template&gt;
  
                        &lt;/div&gt;
  
                        &lt;ng-template #emtyWish&gt;
  
                            &lt;mat-icon  [ngClass]="{'hide_border_heart'  : product_properties.hover_wish_list &amp;&amp; product_properties.index_product == i } "&gt;favorite_border&lt;/mat-icon&gt;
  
                            &lt;mat-icon class="hearts_div_hover" [ngClass]="{'show_full_heart'  : product_properties.hover_wish_list &amp;&amp; product_properties.index_product == i } "&gt;favorite&lt;/mat-icon&gt;
  
                        &lt;/ng-template&gt;
  
                    &lt;/button&gt;
  
                &lt;/div&gt;
  
            &lt;/div&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)="header.add_cart_list( product )"&gt;
  
  
                    &lt;div class="button_footer_products"&gt;
  
                        &lt;span class="glyphicon glyphicon-plus icon_eye notCloseDropdawnCard notCloseDropdawnFavorite" *ngIf="!check_cart( product ) ; else incart "&gt;&lt;/span&gt;
  
                        &lt;ng-template  #incart&gt;
  
                            &lt;span class="glyphicon glyphicon glyphicon-ok icon_eye notCloseDropdawnCard notCloseDropdawnFavorite"&gt;&lt;/span&gt;
  
                        &lt;/ng-template&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 more_detail_product" id="&lt;?php echo $result_all_products['id'] ?&gt;"&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;div class="both_prise_products prise_primary"&gt;
  
                    &lt;del&gt;$2500&lt;/del&gt;
  
                &lt;/div&gt;
  
                &lt;div class="both_prise_products prise_secondary"&gt;
  
                    $3500
  
                &lt;/div&gt;
  
            &lt;/div&gt;
  
            &lt;div class="plus_height"&gt;&lt;/div&gt;
  
        &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>what should i do to solve it ? thank you.</p>