how to use large array with ngfor in angular 5 - html

Question

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?
here is my typescript code that i get some products from server with http post request
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 => {
if ( data['status'] == 'product' ) {
this.products = data['data']['products'];
this.build_pages_link( data['data']['pages_details']);
this.dataservices.update_loader(false);
}
},
error => console.log( error['data'] ) // take error .....
);
}
here is my html code that i display products with ngFor
<div class="width_products products-animation " *ngFor="let product of products ; let i = index" [ngClass]="{ 'width_products_open_menu':header.status_menu }" >
<div 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 }}
</div>
<div class="dropdown_products">
<span class="glyphicon glyphicon-chevron-down"></span>
</div>
<div class="date_products">
<span class='glyphicon glyphicon-time'></span> {{product.product_date}}
</div>
<div class="image_profile_company " (click)="set_router({ path:product['company'].company_name , data: product['company'].company_id , relative:true })">
<img class="image_prof_admin" src="../../assets/images/products_image/{{product['company'].company_image}}">
</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 img_primary_product{{product.product_id}}" src="../../assets/images/products_image/{{product.product_image}}">
</div>
<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 }">
</div>
<div class="about_wish" >
<div class="wish_list_write">
<div class="plus_icon">{{dataservices.language.add_wishlist}}</div>
</div>
<div class="wish_list_icon">
<button mat-mini-fab class="button_heart" >
<div *ngIf="header.wish_properties.wishList.length > 0; else emtyWish " >
<div *ngIf="check_wish( product ) ; else notinwish">
<mat-icon>favorite</mat-icon>
</div>
<ng-template #notinwish >
<mat-icon class="notCloseDropdawnFavorite notCloseDropdawnCard" [ngClass]="{'hide_border_heart' : product_properties.hover_wish_list && product_properties.index_product == i } ">favorite_border</mat-icon>
<mat-icon class="hearts_div_hover notCloseDropdawnFavorite notCloseDropdawnCard" [ngClass]="{'show_full_heart' : product_properties.hover_wish_list && product_properties.index_product == i } ">favorite</mat-icon>
</ng-template>
</div>
<ng-template #emtyWish>
<mat-icon [ngClass]="{'hide_border_heart' : product_properties.hover_wish_list && product_properties.index_product == i } ">favorite_border</mat-icon>
<mat-icon class="hearts_div_hover" [ngClass]="{'show_full_heart' : product_properties.hover_wish_list && product_properties.index_product == i } ">favorite</mat-icon>
</ng-template>
</button>
</div>
</div>
<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)="header.add_cart_list( product )">
<div class="button_footer_products">
<span class="glyphicon glyphicon-plus icon_eye notCloseDropdawnCard notCloseDropdawnFavorite" *ngIf="!check_cart( product ) ; else incart "></span>
<ng-template #incart>
<span class="glyphicon glyphicon glyphicon-ok icon_eye notCloseDropdawnCard notCloseDropdawnFavorite"></span>
</ng-template>
<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 more_detail_product" id="<?php echo $result_all_products['id'] ?>">
<span class=" glyphicon glyphicon-option-horizontal icon_eye"></span>
<div class="both_write ">
More
</div>
</div>
</span>
</div>
<div class="prise_products">
Price:
<div class="both_prise_products prise_primary">
<del>$2500</del>
</div>
<div class="both_prise_products prise_secondary">
$3500
</div>
</div>
<div class="plus_height"></div>
</div>
</div>
what should i do to solve it ? thank you.

Answer 1

the problem is the code of your function is execute every time that you do something in the template (mouse moved, for example). The lifecycle of the template is causing this,add to that the fact that your are creating a instance of that function for every item in your array. I suggest you try to
1- change the change detection strategy of component
Component({
...,
changeDetection: ChangeDetectionStrategy.OnPush
})
MyComponent {}
2- reduce the number of call from your template to methods in your component (try to use pipe instead if can be applied)