0

I am creating a component which utilises a large number of dynamic styles (eg 10) [styles.xx] so the user can customise the component's appearance. In addition the component may be repeated in the parent component quite a few times (eg 10-20 times). Examples of styles include:

[style.color]
[style.font-size]
[style.text-alignment]

I've incorporated ChangeDetectionStrategy.OnPush to minimise the impact on performance.

This may sound highly subjective I do notice when I scroll with the styles incorporated vs no styles, it is slightly sluggish in the scroll performance.

My questions are:

  1. By utilising a large number of dynamic styles in a repeated component can this impact performance? Even with ChangeDetectionStrategy.OnPush?
  2. Using ngStyles vs Styles improve performance?
  3. What other strategies can I use to minimise performance impact?

NOTE: I only need the styles on init of the component.

I'm toying with using document.getElementsByClassName and the set attribute to change the styles on init, but hoping for an easier way utilising the styles.

Thanks in advance

Example of Part of component ( I am using Ionic).

<ion-card *ngIf="traits.isLock && isRead !== 4 && element.is_card_read" fxFlex fxLayout="horizontal" class="element-inactive element" [style.background-color]="element.card_read_bg_color" style="min-height: 50px" no-margin>   
    <div fxFlex>  

      <div fxFlex fxLayout="vertical">   
        <div style="width:100%" [style.text-align]="labelAlignment">
          <label *ngIf="element.is_label_show" class="label caption"  [style.color]="element.read_caption_color" [style.font-size.px]="labelSize">{{columnName}}</label>
        </div>      
        <div style="width:100%" [style.text-align]="textAlignment">
          <span [style.font-size.px]="textSize" [style.color]="element.read_text_color">{{value}}</span>
        </div>      
      </div>    
    </div> 
  </ion-card>
Ka Tech
  • 8,937
  • 14
  • 53
  • 78
  • 1
    Right off the bat I would recommend building an object of the styles and use `ngStyle`. I wouldn't use `document` querying. It would help to see what you have currently. – Phix Apr 19 '19 at 23:35
  • Thanks for the prompt response. I've updated with sample code. I have an ngIf to show different styles where the above example is where I notice sluggish performance. Also I only need the styles on init if that helps. – Ka Tech Apr 19 '19 at 23:59
  • Further to above I end up using scss varibales in my classes which I set on init. – Ka Tech Apr 20 '19 at 01:35

0 Answers0