Ultimate Tips To Optimise Angular Performance

ChangeDetectionStrategy.OnPush

[{"selector":"#anim-a62d4df4-9499-4c64-8fd6-0f2fd1c86b23 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(0%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.14,.34,.47,.9)","fill":"forwards"}] [{"selector":"#anim-a5baa8b9-ede5-47dc-8e6b-ad7df200f316","keyframes":[{"transform":"rotate(-540deg) scale(0.1)","opacity":0},{"transform":"none","opacity":1}],"delay":0,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both","iterations":1}]

Unsubscribe/takeUntil

[{"selector":"#anim-5517ac87-ad4e-45b1-b2fd-e145c1f38d32","keyframes":[{"transform":"rotate(-540deg) scale(0.1)","opacity":0},{"transform":"none","opacity":1}],"delay":0,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both","iterations":1}]

AsyncPipe

[{"selector":"#anim-41303d1f-6a47-4e13-94a6-305dd2dc2805","keyframes":[{"transform":"rotate(-540deg) scale(0.1)","opacity":0},{"transform":"none","opacity":1}],"delay":0,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both","iterations":1}]

Avoid @HostListener

[{"selector":"#anim-eba9f799-ef47-4d74-95f5-3352b51606a9","keyframes":[{"transform":"rotate(-540deg) scale(0.1)","opacity":0},{"transform":"none","opacity":1}],"delay":0,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both","iterations":1}]

Use Pipe instead of function call inside the template

[{"selector":"#anim-78f2a27d-abfc-4c7e-bdce-c5bafb2d2909","keyframes":[{"transform":"rotate(-540deg) scale(0.1)","opacity":0},{"transform":"none","opacity":1}],"delay":0,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both","iterations":1}]

Virtual Scroll

[{"selector":"#anim-800405af-0c0c-411f-9c52-c50a6ad4f7e5","keyframes":[{"transform":"rotate(-540deg) scale(0.1)","opacity":0},{"transform":"none","opacity":1}],"delay":0,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both","iterations":1}]

Use ProvidedIn instead of Providers.

[{"selector":"#anim-3e8dc5eb-56fa-4e3d-b1c0-0fcca98e67c0","keyframes":[{"transform":"rotate(-540deg) scale(0.1)","opacity":0},{"transform":"none","opacity":1}],"delay":0,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both","iterations":1}]

Use import instead of requiring ()

[{"selector":"#anim-f2bcbb5c-d520-4d75-b238-b5e0bd9717aa","keyframes":[{"transform":"rotate(-540deg) scale(0.1)","opacity":0},{"transform":"none","opacity":1}],"delay":0,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both","iterations":1}]

Angular Assignment Help