<!DOCTYPE html><html class="2xl:text-[20px]" dir="ltr" lang="en"><head><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1" name="viewport"><link href="/sitemap-index.xml" rel="sitemap"><link href="/_astro/favicon.bQkwjPEg.ico" rel="shortcut icon"><link href="/_astro/apple-touch-icon.CWHx_CYW.png" rel="apple-touch-icon" sizes="180x180"><link href="/_astro/favicon-16x16.Npuj1Ktx.png" rel="icon" sizes="16x16" type="image/png"><link href="/_astro/favicon-32x32.CccKDGJn.png" rel="icon" sizes="32x32" type="image/png"><style>:root{--aw-font-sans:'Inter Variable';--aw-font-serif:'Inter Variable';--aw-font-heading:'Inter Variable';--aw-color-primary:rgb(1 97 239);--aw-color-secondary:rgb(1 84 207);--aw-color-accent:rgb(109 40 217);--aw-color-text-heading:rgb(0 0 0);--aw-color-text-default:rgb(16 16 16);--aw-color-text-muted:rgb(16 16 16 / 66%);--aw-color-bg-page:rgb(255 255 255);--aw-color-bg-page-dark:#0d1117}.dark{--aw-font-sans:'Inter Variable';--aw-font-serif:'Inter Variable';--aw-font-heading:'Inter Variable';--aw-color-primary:rgb(1 97 239);--aw-color-secondary:rgb(1 84 207);--aw-color-accent:rgb(109 40 217);--aw-color-text-heading:rgb(247, 248, 248);--aw-color-text-default:rgb(229 236 246);--aw-color-text-muted:rgb(229 236 246 / 66%);--aw-color-bg-page:#0d1117}</style><script>!function(){const e="system";function t(e){"dark"===e?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark");const t=document.querySelectorAll("[data-aw-toggle-color-scheme] > input");t&&t.length&&t.forEach((t=>{t.checked="dark"!==e}))}e&&e.endsWith(":only")||(localStorage.theme,0)?t(e.replace(":only","")):"dark"===localStorage.theme||!("theme"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?t("dark"):t("light")}()</script><title>Angular Tips &amp; Tricks — Daniele Ghidoli</title><meta content="Angular Tips &amp; Tricks" name="description"><meta content="index,follow" name="robots"><link href="https://blog.danieleghidoli.it" rel="canonical"><meta content="Angular Tips &amp; Tricks" property="og:title"><meta content="Angular Tips &amp; Tricks" property="og:description"><meta content="https://blog.danieleghidoli.it" property="og:url"><meta content="blog" property="og:type"><meta content="https://blog.danieleghidoli.it/_astro/cover.FvhAn_YF_yN76R.jpg" property="og:image"><meta content="1200" property="og:image:width"><meta content="896" property="og:image:height"><meta content="en" property="og:locale"><meta content="Daniele Ghidoli - Angular Tips &amp; Tricks" property="og:site_name"><meta content="summary_large_image" name="twitter:card"><meta content="@ghidoz" name="twitter:site"><meta content="@ghidoz" name="twitter:creator"><script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=G-03Q07P1G9F" async></script><script type="text/partytown">(function(){const id = "G-03Q07P1G9F";

  window.dataLayer = window.dataLayer || [];
  function gtag() {
    window.dataLayer.push(arguments);
  }
  gtag("js", new Date());
  gtag("config", id);
})();</script><meta content="true" name="astro-view-transitions-enabled"><meta content="swap" name="astro-view-transitions-fallback"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.BScVxmeO.js"></script><link href="/_astro/about-me.CFQxlc8Y.css" rel="stylesheet"><style>[data-astro-image]{width:100%;height:auto;-o-object-fit:var(--fit);object-fit:var(--fit);-o-object-position:var(--pos);object-position:var(--pos);aspect-ratio:var(--w)/var(--h)}[data-astro-image=responsive]{max-width:calc(var(--w) * 1px);max-height:calc(var(--h) * 1px)}[data-astro-image=fixed]{width:calc(var(--w) * 1px);height:calc(var(--h) * 1px)}</style><script>!function(t,e,n,r){(window.crossOriginIsolated||navigator.serviceWorker)&&((r=t[e]=Object.assign(t[e]||{},{lib:"/~partytown/",debug:!1}))[n]=(r[n]||[]).concat(["dataLayer.push"]))}(window,"partytown","forward");const t={preserveBehavior:!1},e=e=>{if("string"==typeof e)return[e,t];const[n,r=t]=e;return[n,{...t,...r}]},n=Object.freeze((()=>{const t=new Set;let e=[];do{Object.getOwnPropertyNames(e).forEach((n=>{"function"==typeof e[n]&&t.add(n)}))}while((e=Object.getPrototypeOf(e))!==Object.prototype);return Array.from(t)})());!function(t,r,o,i,a,s,c,d,l,p,u=t,y){function f(){y||(y=1,"/"==(c=(s.lib||"/~partytown/")+(s.debug?"debug/":""))[0]&&(l=r.querySelectorAll('script[type="text/partytown"]'),i!=t?i.dispatchEvent(new CustomEvent("pt1",{detail:t})):(d=setTimeout(h,1e4),r.addEventListener("pt0",b),a?w(1):o.serviceWorker?o.serviceWorker.register(c+(s.swPath||"partytown-sw.js"),{scope:c}).then((function(t){t.active?w():t.installing&&t.installing.addEventListener("statechange",(function(t){"activated"==t.target.state&&w()}))}),console.error):h())))}function w(e){p=r.createElement(e?"script":"iframe"),t._pttab=Date.now(),e||(p.style.display="block",p.style.width="0",p.style.height="0",p.style.border="0",p.style.visibility="hidden",p.setAttribute("aria-hidden",!0)),p.src=c+"partytown-"+(e?"atomics.js?v=0.10.2":"sandbox-sw.html?"+t._pttab),r.querySelector(s.sandboxParent||"body").appendChild(p)}function h(n,o){for(b(),i==t&&(s.forward||[]).map((function(n){const[r]=e(n);delete t[r.split(".")[0]]})),n=0;n<l.length;n++)(o=r.createElement("script")).innerHTML=l[n].innerHTML,o.nonce=s.nonce,r.head.appendChild(o);p&&p.parentNode.removeChild(p)}function b(){clearTimeout(d)}s=t.partytown||{},i==t&&(s.forward||[]).map((function(r){const[o,{preserveBehavior:i}]=e(r);u=t,o.split(".").map((function(e,r,o){var a;u=u[o[r]]=r+1<o.length?u[o[r]]||(a=o[r+1],n.includes(a)?[]:{}):(()=>{let e=null;if(i){const{methodOrProperty:n,thisObject:r}=((t,e)=>{let n=t;for(let t=0;t<e.length-1;t+=1)n=n[e[t]];return{thisObject:n,methodOrProperty:e.length>0?n[e[e.length-1]]:void 0}})(t,o);"function"==typeof n&&(e=(...t)=>n.apply(r,...t))}return function(){let n;return e&&(n=e(arguments)),(t._ptf=t._ptf||[]).push(o,arguments),n}})()}))})),"complete"==r.readyState?f():(t.addEventListener("DOMContentLoaded",f),t.addEventListener("load",f))}(window,document,navigator,top,window.crossOriginIsolated),document.addEventListener("astro:before-swap",(t=>{let e=document.body.querySelector("iframe[src*='/~partytown/']");e&&t.newDocument.body.append(e)}))</script></head><body class="antialiased bg-page has-cover text-default tracking-tight"><header class="mx-auto w-full border-b border-gray-50/0 ease-in-out flex-none sticky top-0 transition-[opacity] z-40" data-aw-sticky-header="true" id="header"><div class="absolute inset-0"></div><div class="relative mx-auto max-w-7xl md:grid md:grid-cols-3 md:items-center md:px-6 px-3 py-3 text-default w-full"><div class="flex justify-between"><a href="/" class="items-center flex"><div class="items-center flex whitespace-nowrap dark:text-white font-bold gap-2 md:text-xl ml-2 rtl:ml-0 rtl:mr-2 text-2xl" id="logo"><img alt="Daniele Ghidoli" crossorigin="anonymous" decoding="async" height="53" loading="lazy" referrerpolicy="no-referrer" sizes="(min-width: 50px) 50px, 100vw" src="/_astro/logo.BcN-wNzs.png" srcset="/_astro/logo.BcN-wNzs_Z2ekVdk.webp 50w, /_astro/logo.BcN-wNzs_ZFwebS.webp 100w" style="object-fit:cover;object-position:center;max-width:50px;max-height:53px;aspect-ratio:0.9433962264150944;width:100%" width="50"> Daniele Ghidoli</div></a><div class="items-center flex md:hidden"><button aria-label="Toggle Menu" class="items-center flex cursor-pointer flex-col group h-12 justify-center rounded w-12" type="button" data-aw-toggle-menu><span class="sr-only">Toggle Menu</span> <span class="duration-200 transition bg-black dark:bg-white ease h-0.5 my-1 opacity-80 rounded-full transform w-6 group-[.expanded]:rotate-45 group-[.expanded]:translate-y-2.5" aria-hidden="true"></span> <span class="duration-200 transition bg-black dark:bg-white ease h-0.5 my-1 opacity-80 rounded-full transform w-6 group-[.expanded]:opacity-0" aria-hidden="true"></span> <span class="duration-200 transition bg-black dark:bg-white ease h-0.5 my-1 opacity-80 rounded-full transform w-6 group-[.expanded]:-rotate-45 group-[.expanded]:-translate-y-2.5" aria-hidden="true"></span></button></div></div><nav aria-label="Main navigation" class="items-center md:w-auto w-full hidden md:flex md:justify-self-center md:mx-5 md:overflow-x-auto md:overflow-y-visible overflow-x-hidden overflow-y-auto text-default"><ul class="flex w-full md:w-auto flex-col font-medium md:flex-row md:justify-center md:self-center md:text-[0.9375rem] text-xl tracking-[0.01rem]"><li class><a href="/" class="items-center flex whitespace-nowrap hover:text-link px-4 py-3 aw-link-active">Home</a></li><li class><a href="/about-me" class="items-center flex whitespace-nowrap hover:text-link px-4 py-3">About me</a></li><li class><a href="https://nomad.danieleghidoli.it/" class="items-center flex whitespace-nowrap hover:text-link px-4 py-3">My Nomad Life</a></li></ul></nav><div class="items-center md:w-auto w-full hidden md:flex bottom-0 fixed justify-end left-0 md:justify-self-end md:mb-0 md:p-0 md:self-center md:static p-3 rtl:left-auto rtl:right-0"><div class="items-center flex justify-between md:w-auto w-full"><div class="flex"><button aria-label="Toggle between Dark and Light mode" class="text-muted dark:focus:ring-gray-700 dark:hover:bg-gray-700 dark:text-gray-400 focus:outline-none focus:ring-4 focus:ring-gray-200 hover:bg-gray-100 inline-flex items-center p-2.5 rounded-lg text-sm" type="button" data-aw-toggle-color-scheme><svg class="w-6 h-6 md:h-5 md:inline-block md:w-5" data-icon="tabler:sun" height="1em" width="1em"><symbol id="ai:tabler:sun" viewBox="0 0 24 24"><path d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-5 0h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></symbol><use href="#ai:tabler:sun"></use></svg></button> <a href="/rss.xml" class="text-muted dark:focus:ring-gray-700 dark:hover:bg-gray-700 dark:text-gray-400 focus:outline-none focus:ring-4 focus:ring-gray-200 hover:bg-gray-100 inline-flex items-center p-2.5 rounded-lg text-sm hover:text-muted" aria-label="RSS Feed"><svg class="h-5 w-5" data-icon="tabler:rss" height="1em" width="1em"><symbol id="ai:tabler:rss" viewBox="0 0 24 24"><path d="M4 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 4a16 16 0 0 1 16 16M4 11a9 9 0 0 1 9 9" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></symbol><use href="#ai:tabler:rss"></use></svg></a></div></div></div></div></header><main><section class="relative not-prose -mt-[78px] 2xl:-mt-[96px]"><div class="absolute inset-0 pointer-events-none" aria-hidden="true"><img alt="Daniele Ghidoli" crossorigin="anonymous" decoding="async" height="1494" loading="eager" referrerpolicy="no-referrer" sizes="(min-width: 2000px) 2000px, 100vw" src="/_astro/cover.FvhAn_YF.jpg" srcset="/_astro/cover.FvhAn_YF_27KyCc.webp 640w, /_astro/cover.FvhAn_YF_Z2ops3R.webp 750w, /_astro/cover.FvhAn_YF_ZTv4PJ.webp 828w, /_astro/cover.FvhAn_YF_12i9S4.webp 960w, /_astro/cover.FvhAn_YF_cni4p.webp 1080w, /_astro/cover.FvhAn_YF_Ffclq.webp 1280w, /_astro/cover.FvhAn_YF_FuSFi.webp 1668w, /_astro/cover.FvhAn_YF_Z2cX1mw.webp 1920w, /_astro/cover.FvhAn_YF_ZmIYFf.webp 2000w, /_astro/cover.FvhAn_YF_1auWDz.webp 2048w, /_astro/cover.FvhAn_YF_Z1oRXB6.webp 2560w, /_astro/cover.FvhAn_YF_nDfdL.webp 3200w, /_astro/cover.FvhAn_YF_Z1uBhOK.webp 3840w, /_astro/cover.FvhAn_YF_Z2RYIo.webp 4000w" style="object-fit:cover;object-position:center;max-width:2000px;max-height:1494px;aspect-ratio:1.3386880856760375;width:100%" width="2000" class="dark:bg-slate-700 bg-gray-400 absolute h-screen top-0 w-auto"></div><div class="relative mx-auto px-4 sm:px-6 h-screen"><div class="pointer-events-none md:pt-[76px] pt-0"></div><div class="absolute from-transparent left-0 right-0 bg-gradient-to-t h-[100px] hidden md:block to-black/40 top-0"></div><div class="absolute from-transparent left-0 right-0 bg-gradient-to-b bottom-0 md:py-12 py-6 to-black"><div class="mx-auto max-w-4xl px-6 pb-6 text-left"><h1 class="font-heading font-bold dark:text-gray-200 intersect-once intersect-quarter leading-tighter mb-4 md:text-6xl motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 text-5xl tracking-tighter"><span class="text-white">Hi, I'm Daniele.<br/>Angular Developer and Traveler</span></h1><div><p class="text-muted dark:text-slate-300 intersect-once intersect-quarter mb-6 md:text-4xl motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 text-left text-xl"><span class="text-white">Here I share some Angular tips & tricks that I discover while working remotely around the world</span></p></div></div><div class="flex w-full intercept-no-queue intersect-once intersect-quarter justify-center motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0"><a href="#start"><svg class="text-white h-14 w-14" data-icon="tabler:arrow-narrow-down" height="1em" width="1em"><symbol id="ai:tabler:arrow-narrow-down" viewBox="0 0 24 24"><path d="M12 5v14m4-4l-4 4m-4-4l4 4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></symbol><use href="#ai:tabler:arrow-narrow-down"></use></svg></a></div><div class="intersect-once intercept-no-queue intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"></div></div></div></section><section class="mx-auto sm:px-6 lg:py-20 max-w-4xl px-6 py-12 sm:py-16" id="start"><ul><li class="mb-12 md:mb-20"><article class="mx-auto intersect-once intersect-quarter motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 gap-6 grid max-w-md md:gap-8 md:grid-cols-2 md:max-w-none"><a href="/2024/12/09/angular-19-signals-real-life-migration-scenarios-solutions" class="relative block group"><div class="dark:bg-slate-700 bg-gray-400 rounded shadow-lg h-0 lg:pb-[56.25%] md:h-72 md:pb-[75%] overflow-hidden pb-[56.25%] relative"><img alt="Mastering Angular 19 Signals: Real-Life Migration Scenarios and Solutions" crossorigin="anonymous" decoding="async" height="590" loading="lazy" referrerpolicy="no-referrer" sizes="(max-width: 900px) 400px, 900px" src="/_astro/angular-signals.D8Wk4U5I.png" srcset="/_astro/angular-signals.D8Wk4U5I_Z4qcdT.webp 400w, /_astro/angular-signals.D8Wk4U5I_Z2p1D1n.webp 900w, /_astro/angular-signals.D8Wk4U5I_Z1C71Gf.webp 1800w" style="object-fit:cover;object-position:center;max-width:900px;max-height:590px;aspect-ratio:1.7777777777777777;width:100%" width="900" class="dark:bg-slate-700 bg-gray-400 rounded shadow-lg absolute h-full inset-0 mb-6 object-cover w-full"></div></a><div class="mt-2"><header><div class="mb-1"><span class="text-sm"><svg class="inline-block -mt-0.5 dark:text-gray-400 h-3.5 w-3.5" data-icon="tabler:clock" height="1em" width="1em"><symbol id="ai:tabler:clock" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0"/><path d="M12 7v5l3 3"/></g></symbol><use href="#ai:tabler:clock"></use></svg> <time class="inline-block" datetime="Mon Dec 09 2024 00:00:00 GMT+0000 (Coordinated Universal Time)">Dec 9, 2024</time> · <a href="/category/signals" class="hover:underline">Signals</a></span></div><h2 class="dark:text-slate-300 text-xl font-bold font-heading leading-tight mb-2 sm:text-2xl"><a href="/2024/12/09/angular-19-signals-real-life-migration-scenarios-solutions" class="inline-block dark:hover:text-blue-700 duration-200 ease-in hover:text-primary transition">Mastering Angular 19 Signals: Real-Life Migration Scenarios and Solutions</a></h2></header><p class="text-muted dark:text-slate-400 flex-grow text-lg">In this post, I share real-world scenarios from migrating an app to Angular 19 signals, highlighting the challenges and special cases encountered during the transition.</p><footer class="mt-5"><ul class="text-sm"><li class="inline-block bg-gray-100 dark:bg-slate-700 font-medium lowercase mb-2 mr-2 px-2 py-0.5 rtl:ml-2 rtl:mr-0"><a href="/tag/observable" class="text-muted dark:text-slate-300 dark:hover:text-gray-200 hover:text-primary">observable</a></li><li class="inline-block bg-gray-100 dark:bg-slate-700 font-medium lowercase mb-2 mr-2 px-2 py-0.5 rtl:ml-2 rtl:mr-0"><a href="/tag/angular-19" class="text-muted dark:text-slate-300 dark:hover:text-gray-200 hover:text-primary">angular 19</a></li></ul></footer></div></article></li><li class="mb-12 md:mb-20"><article class="mx-auto intersect-once intersect-quarter motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 gap-6 grid max-w-md md:gap-8 md:grid-cols-2 md:max-w-none"><a href="/2020/10/30/when-should-i-unsubscribe-from-an-observable-in-angular" class="relative block group"><div class="dark:bg-slate-700 bg-gray-400 rounded shadow-lg h-0 lg:pb-[56.25%] md:h-72 md:pb-[75%] overflow-hidden pb-[56.25%] relative"><img alt="When should I unsubscribe from an Observable in Angular?" crossorigin="anonymous" decoding="async" height="675" loading="lazy" referrerpolicy="no-referrer" sizes="(max-width: 900px) 400px, 900px" src="/_astro/mailbox.BL3KUiwS.jpg" srcset="/_astro/mailbox.BL3KUiwS_Z2uYcaj.webp 400w, /_astro/mailbox.BL3KUiwS_Z23fPJB.webp 900w, /_astro/mailbox.BL3KUiwS_Z1CvpWd.webp 1800w" style="object-fit:cover;object-position:center;max-width:900px;max-height:675px;aspect-ratio:1.7777777777777777;width:100%" width="900" class="dark:bg-slate-700 bg-gray-400 rounded shadow-lg absolute h-full inset-0 mb-6 object-cover w-full"></div></a><div class="mt-2"><header><div class="mb-1"><span class="text-sm"><svg class="inline-block -mt-0.5 dark:text-gray-400 h-3.5 w-3.5" data-icon="tabler:clock" height="1em" width="1em" viewBox="0 0 24 24"><use href="#ai:tabler:clock"></use></svg> <time class="inline-block" datetime="Fri Oct 30 2020 00:00:00 GMT+0000 (Coordinated Universal Time)">Oct 30, 2020</time> · <a href="/category/rxjs" class="hover:underline">RxJS</a></span></div><h2 class="dark:text-slate-300 text-xl font-bold font-heading leading-tight mb-2 sm:text-2xl"><a href="/2020/10/30/when-should-i-unsubscribe-from-an-observable-in-angular" class="inline-block dark:hover:text-blue-700 duration-200 ease-in hover:text-primary transition">When should I unsubscribe from an Observable in Angular?</a></h2></header><p class="text-muted dark:text-slate-400 flex-grow text-lg">It&#39;s often said that you should always unsubscribe from Observables in Angular, but is it truly necessary in every case? Let&#39;s find out!</p><footer class="mt-5"><ul class="text-sm"><li class="inline-block bg-gray-100 dark:bg-slate-700 font-medium lowercase mb-2 mr-2 px-2 py-0.5 rtl:ml-2 rtl:mr-0"><a href="/tag/observable" class="text-muted dark:text-slate-300 dark:hover:text-gray-200 hover:text-primary">observable</a></li><li class="inline-block bg-gray-100 dark:bg-slate-700 font-medium lowercase mb-2 mr-2 px-2 py-0.5 rtl:ml-2 rtl:mr-0"><a href="/tag/takeuntil" class="text-muted dark:text-slate-300 dark:hover:text-gray-200 hover:text-primary">takeuntil</a></li><li class="inline-block bg-gray-100 dark:bg-slate-700 font-medium lowercase mb-2 mr-2 px-2 py-0.5 rtl:ml-2 rtl:mr-0"><a href="/tag/unsubscribe" class="text-muted dark:text-slate-300 dark:hover:text-gray-200 hover:text-primary">unsubscribe</a></li></ul></footer></div></article></li><li class="mb-12 md:mb-20"><article class="mx-auto intersect-once intersect-quarter motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 gap-6 grid max-w-md md:gap-8 md:grid-cols-2 md:max-w-none"><a href="/2020/10/29/angular-service-returns-undefined-value" class="relative block group"><div class="dark:bg-slate-700 bg-gray-400 rounded shadow-lg h-0 lg:pb-[56.25%] md:h-72 md:pb-[75%] overflow-hidden pb-[56.25%] relative"><img alt="Why my Angular service doesn't return the assigned value?" crossorigin="anonymous" decoding="async" height="675" loading="lazy" referrerpolicy="no-referrer" sizes="(max-width: 900px) 400px, 900px" src="/_astro/crashed-plane.-9BQCEwe.jpg" srcset="/_astro/crashed-plane.-9BQCEwe_Z1KrK5s.webp 400w, /_astro/crashed-plane.-9BQCEwe_rMdHE.webp 900w, /_astro/crashed-plane.-9BQCEwe_Z2phcpJ.webp 1800w" style="object-fit:cover;object-position:center;max-width:900px;max-height:675px;aspect-ratio:1.7777777777777777;width:100%" width="900" class="dark:bg-slate-700 bg-gray-400 rounded shadow-lg absolute h-full inset-0 mb-6 object-cover w-full"></div></a><div class="mt-2"><header><div class="mb-1"><span class="text-sm"><svg class="inline-block -mt-0.5 dark:text-gray-400 h-3.5 w-3.5" data-icon="tabler:clock" height="1em" width="1em" viewBox="0 0 24 24"><use href="#ai:tabler:clock"></use></svg> <time class="inline-block" datetime="Thu Oct 29 2020 00:00:00 GMT+0000 (Coordinated Universal Time)">Oct 29, 2020</time> · <a href="/category/bugs" class="hover:underline">bugs</a></span></div><h2 class="dark:text-slate-300 text-xl font-bold font-heading leading-tight mb-2 sm:text-2xl"><a href="/2020/10/29/angular-service-returns-undefined-value" class="inline-block dark:hover:text-blue-700 duration-200 ease-in hover:text-primary transition">Why my Angular service doesn&#39;t return the assigned value?</a></h2></header><p class="text-muted dark:text-slate-400 flex-grow text-lg">In Angular, assigning a value to a service property in one component may not reflect in another due to a simple issue that can waste a lot of time.</p><footer class="mt-5"><ul class="text-sm"><li class="inline-block bg-gray-100 dark:bg-slate-700 font-medium lowercase mb-2 mr-2 px-2 py-0.5 rtl:ml-2 rtl:mr-0"><a href="/tag/service" class="text-muted dark:text-slate-300 dark:hover:text-gray-200 hover:text-primary">service</a></li><li class="inline-block bg-gray-100 dark:bg-slate-700 font-medium lowercase mb-2 mr-2 px-2 py-0.5 rtl:ml-2 rtl:mr-0"><a href="/tag/singleton" class="text-muted dark:text-slate-300 dark:hover:text-gray-200 hover:text-primary">singleton</a></li><li class="inline-block bg-gray-100 dark:bg-slate-700 font-medium lowercase mb-2 mr-2 px-2 py-0.5 rtl:ml-2 rtl:mr-0"><a href="/tag/undefined" class="text-muted dark:text-slate-300 dark:hover:text-gray-200 hover:text-primary">undefined</a></li></ul></footer></div></article></li><li class="mb-12 md:mb-20"><article class="mx-auto intersect-once intersect-quarter motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 gap-6 grid max-w-md md:gap-8 md:grid-cols-2 md:max-w-none"><a href="/2020/10/28/angular-how-to-prevent-duplicated-http-requests" class="relative block group"><div class="dark:bg-slate-700 bg-gray-400 rounded shadow-lg h-0 lg:pb-[56.25%] md:h-72 md:pb-[75%] overflow-hidden pb-[56.25%] relative"><img alt="Angular: How to prevent duplicated HTTP requests" crossorigin="anonymous" decoding="async" height="675" loading="lazy" referrerpolicy="no-referrer" sizes="(max-width: 900px) 400px, 900px" src="/_astro/angkor-wat.D66UZgZB.jpg" srcset="/_astro/angkor-wat.D66UZgZB_1lepAF.webp 400w, /_astro/angkor-wat.D66UZgZB_1Xp2kh.webp 900w, /_astro/angkor-wat.D66UZgZB_1pBa06.webp 1800w" style="object-fit:cover;object-position:center;max-width:900px;max-height:675px;aspect-ratio:1.7777777777777777;width:100%" width="900" class="dark:bg-slate-700 bg-gray-400 rounded shadow-lg absolute h-full inset-0 mb-6 object-cover w-full"></div></a><div class="mt-2"><header><div class="mb-1"><span class="text-sm"><svg class="inline-block -mt-0.5 dark:text-gray-400 h-3.5 w-3.5" data-icon="tabler:clock" height="1em" width="1em" viewBox="0 0 24 24"><use href="#ai:tabler:clock"></use></svg> <time class="inline-block" datetime="Wed Oct 28 2020 00:00:00 GMT+0000 (Coordinated Universal Time)">Oct 28, 2020</time> · <a href="/category/rxjs" class="hover:underline">RxJS</a></span></div><h2 class="dark:text-slate-300 text-xl font-bold font-heading leading-tight mb-2 sm:text-2xl"><a href="/2020/10/28/angular-how-to-prevent-duplicated-http-requests" class="inline-block dark:hover:text-blue-700 duration-200 ease-in hover:text-primary transition">Angular: How to prevent duplicated HTTP requests</a></h2></header><p class="text-muted dark:text-slate-400 flex-grow text-lg">To prevent duplicate HTTP requests when multiple components call the same service, the first response can be shared with all subscribers using specific techniques.</p><footer class="mt-5"><ul class="text-sm"><li class="inline-block bg-gray-100 dark:bg-slate-700 font-medium lowercase mb-2 mr-2 px-2 py-0.5 rtl:ml-2 rtl:mr-0"><a href="/tag/cache" class="text-muted dark:text-slate-300 dark:hover:text-gray-200 hover:text-primary">cache</a></li><li class="inline-block bg-gray-100 dark:bg-slate-700 font-medium lowercase mb-2 mr-2 px-2 py-0.5 rtl:ml-2 rtl:mr-0"><a href="/tag/observable" class="text-muted dark:text-slate-300 dark:hover:text-gray-200 hover:text-primary">observable</a></li></ul></footer></div></article></li><li class="mb-12 md:mb-20"><article class="mx-auto intersect-once intersect-quarter motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 gap-6 grid max-w-md md:gap-8 md:grid-cols-2 md:max-w-none"><a href="/2020/10/28/load-angular-app-after-user-logged" class="relative block group"><div class="dark:bg-slate-700 bg-gray-400 rounded shadow-lg h-0 lg:pb-[56.25%] md:h-72 md:pb-[75%] overflow-hidden pb-[56.25%] relative"><img alt="How to load an Angular app just after the user is logged" crossorigin="anonymous" decoding="async" height="675" loading="lazy" referrerpolicy="no-referrer" sizes="(max-width: 900px) 400px, 900px" src="/_astro/doors-colors.X1z57Zvq.jpg" srcset="/_astro/doors-colors.X1z57Zvq_Z21Rt7x.webp 400w, /_astro/doors-colors.X1z57Zvq_vIEO.webp 900w, /_astro/doors-colors.X1z57Zvq_1Ja6e2.webp 1800w" style="object-fit:cover;object-position:center;max-width:900px;max-height:675px;aspect-ratio:1.7777777777777777;width:100%" width="900" class="dark:bg-slate-700 bg-gray-400 rounded shadow-lg absolute h-full inset-0 mb-6 object-cover w-full"></div></a><div class="mt-2"><header><div class="mb-1"><span class="text-sm"><svg class="inline-block -mt-0.5 dark:text-gray-400 h-3.5 w-3.5" data-icon="tabler:clock" height="1em" width="1em" viewBox="0 0 24 24"><use href="#ai:tabler:clock"></use></svg> <time class="inline-block" datetime="Wed Oct 28 2020 00:00:00 GMT+0000 (Coordinated Universal Time)">Oct 28, 2020</time> · <a href="/category/rxjs" class="hover:underline">RxJS</a></span></div><h2 class="dark:text-slate-300 text-xl font-bold font-heading leading-tight mb-2 sm:text-2xl"><a href="/2020/10/28/load-angular-app-after-user-logged" class="inline-block dark:hover:text-blue-700 duration-200 ease-in hover:text-primary transition">How to load an Angular app just after the user is logged</a></h2></header><p class="text-muted dark:text-slate-400 flex-grow text-lg">No matter the authentication method in your Angular app, you&#39;ll always face the challenge of initializing views and components only after the user&#39;s info is fully loaded. Let&#39;s explore how to solve this!</p><footer class="mt-5"><ul class="text-sm"><li class="inline-block bg-gray-100 dark:bg-slate-700 font-medium lowercase mb-2 mr-2 px-2 py-0.5 rtl:ml-2 rtl:mr-0"><a href="/tag/login" class="text-muted dark:text-slate-300 dark:hover:text-gray-200 hover:text-primary">login</a></li><li class="inline-block bg-gray-100 dark:bg-slate-700 font-medium lowercase mb-2 mr-2 px-2 py-0.5 rtl:ml-2 rtl:mr-0"><a href="/tag/replaysubject" class="text-muted dark:text-slate-300 dark:hover:text-gray-200 hover:text-primary">replaysubject</a></li><li class="inline-block bg-gray-100 dark:bg-slate-700 font-medium lowercase mb-2 mr-2 px-2 py-0.5 rtl:ml-2 rtl:mr-0"><a href="/tag/subject" class="text-muted dark:text-slate-300 dark:hover:text-gray-200 hover:text-primary">subject</a></li></ul></footer></div></article></li><li class="mb-12 md:mb-20"><article class="mx-auto intersect-once intersect-quarter motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 gap-6 grid max-w-md md:gap-8 md:grid-cols-2 md:max-w-none"><a href="/2017/09/11/subscribe-rxjs-event-after-emitted-angular" class="relative block group"><div class="dark:bg-slate-700 bg-gray-400 rounded shadow-lg h-0 lg:pb-[56.25%] md:h-72 md:pb-[75%] overflow-hidden pb-[56.25%] relative"><img alt="How to subscribe to RxJS event after it has been already emitted" crossorigin="anonymous" decoding="async" height="601" loading="lazy" referrerpolicy="no-referrer" sizes="(max-width: 900px) 400px, 900px" src="/_astro/replay.BONCpQIc.jpg" srcset="/_astro/replay.BONCpQIc_ZeTCQf.webp 400w, /_astro/replay.BONCpQIc_Z2qhDvm.webp 900w, /_astro/replay.BONCpQIc_LsqHR.webp 1800w" style="object-fit:cover;object-position:center;max-width:900px;max-height:601px;aspect-ratio:1.7777777777777777;width:100%" width="900" class="dark:bg-slate-700 bg-gray-400 rounded shadow-lg absolute h-full inset-0 mb-6 object-cover w-full"></div></a><div class="mt-2"><header><div class="mb-1"><span class="text-sm"><svg class="inline-block -mt-0.5 dark:text-gray-400 h-3.5 w-3.5" data-icon="tabler:clock" height="1em" width="1em" viewBox="0 0 24 24"><use href="#ai:tabler:clock"></use></svg> <time class="inline-block" datetime="Mon Sep 11 2017 00:00:00 GMT+0000 (Coordinated Universal Time)">Sep 11, 2017</time> · <a href="/category/rxjs" class="hover:underline">RxJS</a></span></div><h2 class="dark:text-slate-300 text-xl font-bold font-heading leading-tight mb-2 sm:text-2xl"><a href="/2017/09/11/subscribe-rxjs-event-after-emitted-angular" class="inline-block dark:hover:text-blue-700 duration-200 ease-in hover:text-primary transition">How to subscribe to RxJS event after it has been already emitted</a></h2></header><p class="text-muted dark:text-slate-400 flex-grow text-lg">Observables, Subjects, and EventEmitters are powerful, but they share a common issue: if you subscribe after an event has already been emitted, you&#39;ll miss it!</p><footer class="mt-5"><ul class="text-sm"><li class="inline-block bg-gray-100 dark:bg-slate-700 font-medium lowercase mb-2 mr-2 px-2 py-0.5 rtl:ml-2 rtl:mr-0"><a href="/tag/replaysubject" class="text-muted dark:text-slate-300 dark:hover:text-gray-200 hover:text-primary">replaysubject</a></li><li class="inline-block bg-gray-100 dark:bg-slate-700 font-medium lowercase mb-2 mr-2 px-2 py-0.5 rtl:ml-2 rtl:mr-0"><a href="/tag/subject" class="text-muted dark:text-slate-300 dark:hover:text-gray-200 hover:text-primary">subject</a></li></ul></footer></div></article></li></ul><div class="flex container"><div class="flex justify-between container flex-row mx-auto"><a href="/" class="px-3 btn btn-tertiary md:px-3 invisible mr-2"><svg class="w-6 h-6" data-icon="tabler:chevron-left" height="1em" width="1em"><symbol id="ai:tabler:chevron-left" viewBox="0 0 24 24"><path d="m15 6l-6 6l6 6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></symbol><use href="#ai:tabler:chevron-left"></use></svg><p class="ml-2">Newer posts</p></a><a href="/2" class="px-3 btn btn-tertiary md:px-3"><span class="mr-2">Older posts</span><svg class="w-6 h-6" data-icon="tabler:chevron-right" height="1em" width="1em"><symbol id="ai:tabler:chevron-right" viewBox="0 0 24 24"><path d="m9 6l6 6l-6 6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></symbol><use href="#ai:tabler:chevron-right"></use></svg></a></div></div></section></main><footer class="relative not-prose border-gray-200 border-t dark:border-slate-800"><div class="absolute inset-0 pointer-events-none dark:bg-dark" aria-hidden="true"></div><div class="dark:text-slate-300 intersect-once intersect-quarter motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intercept-no-queue max-w-7xl mx-auto px-4 relative sm:px-6"><div class="md:flex md:items-center md:justify-between md:py-8 py-6"><ul class="flex rtl:ml-0 -ml-2 mb-4 md:mb-0 md:ml-4 md:order-1 rtl:-mr-2 rtl:md:ml-0 rtl:md:mr-4"><li><a href="https://github.com/ghidoz" class="text-muted dark:focus:ring-gray-700 dark:hover:bg-gray-700 dark:text-gray-400 focus:outline-none focus:ring-4 focus:ring-gray-200 hover:bg-gray-100 inline-flex items-center p-2.5 rounded-lg text-sm" aria-label="Github"><svg class="h-5 w-5" data-icon="tabler:brand-github" height="1em" width="1em"><symbol id="ai:tabler:brand-github" viewBox="0 0 24 24"><path d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2a4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6c-.6.6-.6 1.2-.5 2V21" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></symbol><use href="#ai:tabler:brand-github"></use></svg></a></li><li><a href="https://www.linkedin.com/in/danieleghidoli" class="text-muted dark:focus:ring-gray-700 dark:hover:bg-gray-700 dark:text-gray-400 focus:outline-none focus:ring-4 focus:ring-gray-200 hover:bg-gray-100 inline-flex items-center p-2.5 rounded-lg text-sm" aria-label="LinkedIn"><svg class="h-5 w-5" data-icon="tabler:brand-linkedin" height="1em" width="1em"><symbol id="ai:tabler:brand-linkedin" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M8 11v5m0-8v.01M12 16v-5m4 5v-3a2 2 0 1 0-4 0"/><path d="M3 7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z"/></g></symbol><use href="#ai:tabler:brand-linkedin"></use></svg></a></li><li><a href="https://www.instagram.com/ghidoz" class="text-muted dark:focus:ring-gray-700 dark:hover:bg-gray-700 dark:text-gray-400 focus:outline-none focus:ring-4 focus:ring-gray-200 hover:bg-gray-100 inline-flex items-center p-2.5 rounded-lg text-sm" aria-label="Instagram"><svg class="h-5 w-5" data-icon="tabler:brand-instagram" height="1em" width="1em"><symbol id="ai:tabler:brand-instagram" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M4 8a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z"/><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0m7.5-4.5v.01"/></g></symbol><use href="#ai:tabler:brand-instagram"></use></svg></a></li><li><a href="https://x.com/ghido" class="text-muted dark:focus:ring-gray-700 dark:hover:bg-gray-700 dark:text-gray-400 focus:outline-none focus:ring-4 focus:ring-gray-200 hover:bg-gray-100 inline-flex items-center p-2.5 rounded-lg text-sm" aria-label="X"><svg class="h-5 w-5" data-icon="tabler:brand-x" height="1em" width="1em"><symbol id="ai:tabler:brand-x" viewBox="0 0 24 24"><path d="m4 4l11.733 16H20L8.267 4zm0 16l6.768-6.768m2.46-2.46L20 4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></symbol><use href="#ai:tabler:brand-x"></use></svg></a></li><li><a href="/rss.xml" class="text-muted dark:focus:ring-gray-700 dark:hover:bg-gray-700 dark:text-gray-400 focus:outline-none focus:ring-4 focus:ring-gray-200 hover:bg-gray-100 inline-flex items-center p-2.5 rounded-lg text-sm" aria-label="RSS"><svg class="h-5 w-5" data-icon="tabler:rss" height="1em" width="1em" viewBox="0 0 24 24"><use href="#ai:tabler:rss"></use></svg></a></li></ul><div class="text-sm dark:text-muted mr-4">&copy;Daniele Ghidoli · All rights reserved.</div></div></div></footer><script>!function(){const e="system";if(window.basic_script)return;function t(e){"dark"===e?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}window.basic_script=!0;const a=function(){e&&e.endsWith(":only")||(localStorage.theme,0)?t(e.replace(":only","")):"dark"===localStorage.theme||!("theme"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?t("dark"):t("light")};function o(e,t,a){const o="string"==typeof e?document.querySelectorAll(e):e;o&&o.length&&o.forEach((e=>{e.addEventListener(t,(t=>a(t,e)),!1)}))}function c(e){const t=document.querySelector("iframe.giscus-frame");t&&t.contentWindow.postMessage({giscus:{setConfig:{theme:e}}},"https://giscus.app")}a();const d=function(){let t=window.scrollY,a=!0;o("#header nav","click",(function(){document.querySelector("[data-aw-toggle-menu]")?.classList.remove("expanded"),document.body.classList.remove("overflow-hidden"),document.getElementById("header")?.classList.remove("h-screen"),document.getElementById("header")?.classList.remove("expanded"),document.getElementById("header")?.classList.remove("bg-page"),document.querySelector("#header nav")?.classList.add("hidden"),document.querySelector("#header > div > div:last-child")?.classList.add("hidden")})),o("[data-aw-toggle-menu]","click",(function(e,t){t.classList.toggle("expanded"),document.body.classList.toggle("overflow-hidden"),document.getElementById("header")?.classList.toggle("h-screen"),document.getElementById("header")?.classList.toggle("expanded"),document.getElementById("header")?.classList.toggle("bg-page"),document.querySelector("#header nav")?.classList.toggle("hidden"),document.querySelector("#header > div > div:last-child")?.classList.toggle("hidden")})),o("[data-aw-toggle-color-scheme]","click",(function(){e.endsWith(":only")||(document.documentElement.classList.toggle("dark"),localStorage.theme=document.documentElement.classList.contains("dark")?"dark":"light",c(localStorage.theme))}));const d=setInterval((()=>{document.querySelector(".is-article")||clearInterval(d);document.querySelector("iframe.giscus-frame")&&(clearInterval(d),c(localStorage.theme))}),100);o("[data-aw-social-share]","click",(function(e,t){const a=t.getAttribute("data-aw-social-share"),o=encodeURIComponent(t.getAttribute("data-aw-url")),c=encodeURIComponent(t.getAttribute("data-aw-text"));let d;switch(a){case"facebook":d=`https://www.facebook.com/sharer.php?u=${o}`;break;case"twitter":d=`https://twitter.com/intent/tweet?url=${o}&text=${c}`;break;case"linkedin":d=`https://www.linkedin.com/shareArticle?mini=true&url=${o}&title=${c}`;break;case"whatsapp":d=`https://wa.me/?text=${c}%20${o}`;break;case"mail":d=`mailto:?subject=%22${c}%22&body=${c}%20${o}`;break;default:return}const s=document.createElement("a");s.target="_blank",s.href=d,s.click()}));function s(){const e=document.querySelector("#header[data-aw-sticky-header]");e&&(t>60&&!e.classList.contains("scroll")?e.classList.add("scroll"):t<=60&&e.classList.contains("scroll")&&e.classList.remove("scroll"),a=!1)}window.matchMedia("(max-width: 767px)").addEventListener("change",(function(){document.querySelector("[data-aw-toggle-menu]")?.classList.remove("expanded"),document.body.classList.remove("overflow-hidden"),document.getElementById("header")?.classList.remove("h-screen"),document.getElementById("header")?.classList.remove("expanded"),document.getElementById("header")?.classList.remove("bg-page"),document.querySelector("#header nav")?.classList.add("hidden"),document.querySelector("#header > div > div:last-child")?.classList.add("hidden")})),s(),o([document],"scroll",(function(){t=window.scrollY,a||(window.requestAnimationFrame((()=>{s()})),a=!0)}))},s=function(){document.documentElement.classList.add("motion-safe:scroll-smooth");const e=document.querySelector("[data-aw-toggle-menu]");e&&e.classList.remove("expanded"),document.body.classList.remove("overflow-hidden"),document.getElementById("header")?.classList.remove("h-screen"),document.getElementById("header")?.classList.remove("expanded"),document.querySelector("#header nav")?.classList.add("hidden")};window.onload=d,window.onpageshow=s,document.addEventListener("astro:after-swap",(()=>{a(),d(),s()}))}()</script><script>const Observer={observer:null,delayBetweenAnimations:100,animationCounter:0,start(){const t=Array.from(document.querySelectorAll(['[class*=" intersect:"]','[class*=":intersect:"]','[class^="intersect:"]','[class="intersect"]','[class*=" intersect "]','[class^="intersect "]','[class$=" intersect"]'].join(",")));t.forEach((t=>{var e;t.setAttribute("no-intersect",""),t._intersectionThreshold=(e=t).classList.contains("intersect-full")?.99:e.classList.contains("intersect-half")?.5:e.classList.contains("intersect-quarter")?.25:0}));this.observer=new IntersectionObserver((t=>{t.forEach((t=>{requestAnimationFrame((()=>{const e=t.target,s=t.intersectionRatio,n=e._intersectionThreshold;if(e.classList.contains("intersect-no-queue"))t.isIntersecting?(e.removeAttribute("no-intersect"),e.classList.contains("intersect-once")&&this.observer.unobserve(e)):e.setAttribute("no-intersect","");else if(s>=n){if(!e.hasAttribute("data-animated")){e.removeAttribute("no-intersect"),e.setAttribute("data-animated","true");const t=this.animationCounter*this.delayBetweenAnimations;this.animationCounter++,e.style.transitionDelay=`${t}ms`,e.style.animationDelay=`${t}ms`,e.classList.contains("intersect-once")&&this.observer.unobserve(e)}}else e.setAttribute("no-intersect",""),e.removeAttribute("data-animated"),e.style.transitionDelay="",e.style.animationDelay="",this.animationCounter=0}))}))}).bind(this),{threshold:[0,.25,.5,.99]}),t.forEach((t=>{this.observer.observe(t)}))}};Observer.start(),document.addEventListener("astro:after-swap",(()=>{Observer.start()}))</script></body></html>