{"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 &#8220;when&#8221;"},"content":{"rendered":"\n<p>Last month, I introduced the <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-17-lazy-loading-with-defer\/\" target=\"_blank\" rel=\"noopener\" title=\"\">defer block<\/a> and its <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-17-trigger-options-for-defer\/\" target=\"_blank\" rel=\"noopener\" title=\"\">trigger options<\/a> to perform lazy-loading of a template block with various options.<\/p>\n\n\n\n<p>One of the most flexible ways to user defer is to use the <a href=\"https:\/\/angular.dev\/guide\/defer#triggers:~:text=check-,when,be%20an%20asynchronous%20operation%20if%20the%20dependencies%20need%20to%20be%20fetched).,-Note%3A%20if\" target=\"_blank\" rel=\"noopener\" title=\"\"><code>when<\/code> condition<\/a> because it allows us to load some code based on a boolean value &#8211; which means we have complete control over when to switch that value to <code>true<\/code>.<\/p>\n\n\n\n<p> 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<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"748\" height=\"276\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/12\/image.png\" alt=\"\" class=\"wp-image-1839\" style=\"width:468px;height:auto\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/12\/image.png 748w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/12\/image-300x111.png 300w\" sizes=\"auto, (max-width: 748px) 100vw, 748px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Another interesting feature is that <code>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 <code>OR<\/code>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"780\" height=\"384\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/12\/image-1.png\" alt=\"\" class=\"wp-image-1840\" style=\"width:494px;height:auto\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/12\/image-1.png 780w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/12\/image-1-300x148.png 300w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/12\/image-1-768x378.png 768w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>And, of course, we can still use a <code>placeholder<\/code> to display before the block is loaded, as illustrated above.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8211; which means we have complete [&hellip;]<\/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":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1838","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1838"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1838\/revisions"}],"predecessor-version":[{"id":1843,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1838\/revisions\/1843"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1838"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}