1"use strict";(self.webpackChunkionic_docs=self.webpackChunkionic_docs||[]).push([["13467"],{89362(e,n,o){o.r(n),o.d(n,{metadata:()=>r,default:()=>m,frontMatter:()=>a,contentTitle:()=>c,toc:()=>l,assets:()=>s});var r=JSON.parse('{"id":"angular/performance","title":"Angular Performance","description":"Angular Performance: Manage App Component Change with ngFor","source":"@site/docs/angular/performance.mdx","sourceDirName":"angular","slug":"/angular/performance","permalink":"/docs/angular/performance","draft":false,"unlisted":false,"editUrl":"https://github.com/ionic-team/ionic-docs/edit/main/docs/angular/performance.mdx","tags":[],"version":"current","frontMatter":{"title":"Angular Performance","sidebar_label":"Performance"},"sidebar":"docs","previous":{"title":"Storage","permalink":"/docs/angular/storage"},"next":{"title":"Zoneless","permalink":"/docs/angular/zoneless"}}'),i=o(74848),t=o(28453);let a={title:"Angular Performance",sidebar_label:"Performance"},c,s={},l=[{value:"*ngFor with Ionic Components",id:"ngfor-with-ionic-components",level:2},{value:"From the Ionic Team",id:"from-the-ionic-team",level:2},{value:"From the Angular Team",id:"from-the-angular-team",level:2},{value:"From the Community",id:"from-the-community",level:2}];function h(e){let n={a:"a",admonition:"admonition",code:"code",em:"em",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,t.R)(),...e.components},{Head:o}=n;return o||function(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Head",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(o,{children:[(0,i.jsx)("title",{children:"Angular Performance: Manage App Component Change with ngFor"}),(0,i.jsx)("meta",{name:"description",content:"Learn how Angular manages change propagation using ngFor with Ionic Components. Read for more information about Angular performance on Ionic apps."})]}),"\n",(0,i.jsx)(n.h2,{id:"ngfor-with-ionic-components",children:"*ngFor with Ionic Components"}),"\n",(0,i.jsxs)(n.p,{children:["When using ",(0,i.jsx)(n.code,{children:"*ngFor"})," with Ionic components, we recommend using Angular's ",(0,i.jsx)(n.code,{children:"trackBy"})," option. This allows Angular to manage change propagation in a much more efficient way and only update the content inside of the component rather than re-create the component altogether."]}),"\n",(0,i.jsxs)(n.p,{children:["By using ",(0,i.jsx)(n.code,{children:"trackBy"})," you can provide a stable identity for each loop element so Angular can track insertions and deletions within the iterator. Below is an example of how to use ",(0,i.jsx)(n.code,{children:"trackBy"}),":"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"home.page.html"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-html",children:'<ion-item *ngFor="let item of items; trackBy:trackItems">\n <ion-label>{{ item.value }}</ion-label>\n</ion-item>\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"home.component.ts"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-tsx",children:"\nitems = [\n { id: 0, value: 'Item 0' },\n { id: 1, value: 'Item 1' },\n ...\n]\n\ntrackItems(index: number, itemObject: any) {\n return itemObject.id;\n}\n"})}),"\n",(0,i.jsxs)(n.p,{children:["In this example, we have an array of objects called ",(0,i.jsx)(n.code,{children:"items"}),". Each object contains a ",(0,i.jsx)(n.code,{children:"value"})," and an ",(0,i.jsx)(n.code,{children:"id"}),". Using ",(0,i.jsx)(n.code,{children:"trackBy"}),", we pass a ",(0,i.jsx)(n.code,{children:"trackItems"})," function which returns the ",(0,i.jsx)(n.code,{children:"id"})," of each object. This ",(0,i.jsx)(n.code,{children:"id"})," is used to provide a stable identity for each loop element."]}),"\n",(0,i.jsxs)(n.p,{children:["For more information, refer to the ",(0,i.jsx)(n.a,{href:"https://angular.io/api/common/NgForOf#change-propagation",children:"Angular NgForOf change propagation documentation"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"from-the-ionic-team",children:"From the Ionic Team"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://ionicframework.com/blog/how-to-lazy-load-in-ionic-angular/",children:"How to Lazy Load in Ionic Angular"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://ionicframework.com/blog/improved-perceived-performance-with-skeleton-screens/",children:"Improved Perceived Performance with Skeleton Screens"})}),"\n",(0,i.jsx)(n.h2,{id:"from-the-angular-team",children:"From the Angular Team"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://web.dev/angular",children:"Build performant and progressive Angular apps"})," - web.dev"]}),"\n",(0,i.jsx)(n.h2,{id:"from-the-community",children:"From the Community"}),"\n","\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://www.joshmorony.com/high-performance-animations-in-ionic/",children:"High Performance Animations in Ionic"})," - Josh Morony"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/",children:"High Performance List Filtering in Ionic"})," - Josh Morony"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://www.joshmorony.com/increasing-performance-with-efficient-dom-writes-in-ionic-2/",children:"Increasing Performance with Efficient DOM Writes in Ionic"})," - Josh Morony"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/",children:"Ionic Framework is Fast (But Your Code Might Not Be)"})," - Josh Morony"]}),"\n","\n",(0,i.jsx)(n.admonition,{type:"note",children:(0,i.jsxs)(n.p,{children:["Do you have a guide you'd like to share? Click the ",(0,i.jsx)(n.em,{children:"Edit this page"})," button below."]})})]})}function m(e={}){let{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},28453(e,n,o){o.d(n,{R:()=>a,x:()=>c});var r=o(96540);let i={},t=r.createContext(i);function a(e){let n=r.useContext(t);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),r.createElement(t.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.