{"id":1838,"date":"2023-12-04T05:00:00","date_gmt":"2023-12-04T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1838"},"modified":"2023-12-01T17:51:47","modified_gmt":"2023-12-02T01:51:47","slug":"customized-deferred-loading-with-when","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/customized-deferred-loading-with-when\/","title":{"rendered":"Customized Deferred Loading with “when”"},"content":{"rendered":"\n

Last month, I introduced the defer block<\/a> and its trigger options<\/a> to perform lazy-loading of a template block with various options.<\/p>\n\n\n\n

One of the most flexible ways to user defer is to use the when<\/code> condition<\/a> because it allows us to load some code based on a boolean value – which means we have complete control over when to switch that value to true<\/code>.<\/p>\n\n\n\n

Maybe we want to do it once we receive a response from the server or wait for the user to click on a button, or both, for instance:<\/p>\n\n\n

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

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

Another interesting feature is that when<\/code> can be combined with other triggers. In that case, the first condition to be met would lazy-load the block of code, acting similarly to a logical OR<\/code>:<\/p>\n\n\n

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

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

And, of course, we can still use a placeholder<\/code> to display before the block is loaded, as illustrated above.<\/p>\n","protected":false},"excerpt":{"rendered":"

Last month, I introduced the defer block and its trigger options to perform lazy-loading of a template block with various options. One of the most flexible ways to user defer is to use the when condition because it allows us to load some code based on a boolean value – which means we have complete […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1838","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t