{"id":1082,"date":"2023-06-19T05:00:00","date_gmt":"2023-06-19T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1082"},"modified":"2023-09-19T14:11:37","modified_gmt":"2023-09-19T21:11:37","slug":"lazy-loading-with-defer-new-rfc","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/lazy-loading-with-defer-new-rfc\/","title":{"rendered":"Lazy-loading with defer (new RFC)"},"content":{"rendered":"\n

We’ve talked about lazy loading and performance<\/a> a few times in this newsletter. The Angular team is working on a new feature that will expand the scope and flexibility of lazy-loading in Angular using a new primitive with a syntax similar to the one introduced in the control flow RFC<\/a>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The above code would lazy-load the calendar component whenever that block is rendered in a template. And it gets better: We can also add conditions on when to render, how much time to wait before doing so, or even a combination of several predefined conditions\/triggers<\/a>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The above code means that the calendar component would be loaded if the user interacts with the page or after 5 seconds.<\/p>\n\n\n\n

We will be able to provide a placeholder<\/a> and a loading template, too – those would be displayed before and during lazy-loading, respectively:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

This new defer block<\/a> is in the request for comments (RFC) phase, which means the Angular team is gathering feedback from all of us on this idea. There is no timeline yet as to when the feature will be available. Feel free to add your thoughts and contribute here<\/a>. The more excitement is shown on Github, the higher the Angular team will prioritize the feature.<\/p>\n","protected":false},"excerpt":{"rendered":"

We’ve talked about lazy loading and performance a few times in this newsletter. The Angular team is working on a new feature that will expand the scope and flexibility of lazy-loading in Angular using a new primitive with a syntax similar to the one introduced in the control flow RFC: The above code would lazy-load […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,20],"tags":[],"class_list":["post-1082","post","type-post","status-publish","format-standard","hentry","category-angular","category-performance"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t