Angular sync data and why it rocks

Angular sync data and why it rocks

Angular sync data and why it rocks

Avatar
Posted by robert@wickersquare.com
June 18th, 2020 in Docs

Digging deeper

To understand what was wrong with this approach, there are a few important elements to note about how Angular and Javascript work.

Angular’s *ngIf

*ngIf is a built-in tool that Angular provides, and it is quite powerful when building dynamic web apps. Here’s how it works: when the condition is true, the conditional HTML is added to the DOM and rendered, and when the condition is false, the relevant elements are removed from the DOM entirely. There are cases where you might want to hide an element with CSS instead, but in the large majority of cases, *ngIf is both simpler and more performant.

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	font-smoothing: antialiased !important;
	}
	
	.material .wpb_row, .material .wpb_content_element {
    margin-bottom: 0em !important;
}

.header-wrap  {
  object-fit: cover;
  width: 100% !important;
  height: 337px !important;
}
.nectar-recent-posts-single_featured h2, .nectar-recent-posts-single_featured a, .nectar-recent-posts-single_featured .controls li, .nectar-recent-posts-single_featured .inner-wrap {
    color: #ffffff !important;
    font-family: 'Product Sans Bold', sans-serif !IMPORTANT;
}

.main-content > .row > .wpb_row:not(.full-width-content) .nectar-recent-posts-single_featured > div, .main-content > .row > .wpb_row:not(.full-width-content) .nectar-recent-posts-single_featured.multiple_featured > div {
border-radius: 0px !important;
    overflow: hidden;
}
.masonry.classic_enhanced .masonry-blog-item h3.title, .blog-recent[data-style*="classic_enhanced"] h3.title {
    margin-bottom: 0;
    font-family: 'Product Sans Bold', sans-serif !important;
    font-size: 32px !important;
    color: #000000 !important;
    line-height: 34px !important;
    font-weight: 600 !important;
}

Asynchronous execution in Javascript

In Javascript, the Promise is the fundamental building-block of asynchronous code. The Promise interface is fairly straightforward: Promises have just two methods, .then and .catch. Both of these methods take callbacks as parameters. If the Promise resolves successfully, any callbacks passed to .then are run, and if the Promise is rejected or has an error when being processed, callbacks passed to .catch are executed.

What I’ve found to be the most common “gotcha” of using Promises is that any code in a .then callback is guaranteed to be asynchronous. When a Promise is resolved (or, if you create a completed Promise with the static Promise.resolve() method), all callbacks on the Promise are put at the end of the microtask queue. So no matter what, code after a call to .then will be run before the code inside of the call to .then. The short answer to “How do I get a value out of a completed Promise synchronously?” is that you can’t.

Angular’s async pipe

Because of the way Promises work, Angular’s async pipe has to be impure (meaning that it can return different outputs without any change in input). The transform method on Pipes is synchronous, so when an async pipe gets a Promise, the pipe adds a callback to the Promise and returns null. When the Promise resolves and the callback is called, the async pipe stores the value retrieved from the Promise and marks itself for check. Then, when change detection occurs again, the transform method will be called with the same Promise and the pipe returns the value that it got out of that Promise.

While not the main focus of this article, another important note here is that the async pipe will only return the value retrieved from the Promise if the input is still the exact same Promise instance. If you’re calling an async method, or a method that creates a new Promise every time it’s called, the async pipe will assume that any value it has is no longer relevant and thus will likely never produce a usable value.

Hopefully I’ve been able to shed some light on how the code presented at the beginning of this post had some problems.

let's work nicely together

FIND Innovation Labs Inc.
409 Granville St., Suite 1055
Vancouver, BC.
V6C 1T2, Canada

t. 1.844.469.3463