{"id":38452,"date":"2025-05-12T17:49:23","date_gmt":"2025-05-12T12:19:23","guid":{"rendered":"https:\/\/mobisoftinfotech.com\/resources\/?p=38452"},"modified":"2025-11-20T11:06:37","modified_gmt":"2025-11-20T05:36:37","slug":"angular-performance-defer-tutorial","status":"publish","type":"post","link":"https:\/\/mobisoftinfotech.com\/resources\/blog\/web-development\/angular-performance-defer-tutorial","title":{"rendered":"Angular Tutorial: Optimise Performance Using Deferred Views In Angular Using @defer"},"content":{"rendered":"

Have you ever built a dashboard that feels slow or unresponsive right after loading? Or a page that tries to load everything at once, even parts the user hasn\u2019t even scrolled to yet? As Angular apps grow, so does the initial rendering cost, which can make the app feel sluggish. While Angular has always offered tools like *ngIf for conditionally showing content and Angular lazy-loaded modules to split up large apps, these tools haven’t made it easy to control conditional rendering in smaller, more specific parts of a page.<\/p>\n\n\n\n

You might wonder: why render things no one\u2019s even looking at yet? Why not save those precious CPU cycles for something more important? Enter Angular @defer, our performance hero, swooping in to slash initial load times and bring some sanity back to your rendering logic<\/p>\n\n\n\n

What is @defer?<\/strong><\/h2>\n\n\n\n

Starting with Angular 17, you can now use @defer syntax in Angular to delay rendering certain parts of your templates. This new feature, called deferred views in Angular, gives you a simple and powerful way to control when specific parts of the UI should appear. Whether it’s waiting for user interaction, scrolling to a section, or even waiting for a certain condition to be met, @defer helps you load only what’s needed, when it’s needed. This can greatly improve both actual performance and how fast the app feels to users, all without adding much complexity for developers. Many companies looking to hire angular developers<\/strong><\/a> are now using these strategies to build high-performing web apps<\/p>\n\n\n\n

The @defer block is a structural syntax that tells Angular, “Wait to render this part of the view until certain conditions are met.” It’s more than just Angular lazy loading. It’s an intelligent, conditional rendering technique that supports Angular template optimization.<\/p>\n\n\n

@defer {\n\n  <app-heavy-widget<\/span> \/><\/span>\n\n }<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
In the example above, <app-heavy-widget> won’t be created immediately with the rest of the page. Instead, Angular will defer its rendering, resulting in a faster, lighter initial page load.

This aligns with Angular rendering strategies aimed at improving performance and user experience. It\u2019s a common approach in modern web application development<\/strong><\/a>, where performance-driven conditional rendering is critical for scalable UI solutions.<\/p>\n\n\n\n