First, I would like to apologize for being late in this week’s newsletter, I was in GDG Devfest Nairobi 2019 over the weekend, and arrived back at home yesterday at Night. I hope to write more about that later. This is my second weekly newsletter on Angular, which starts from the 13th to 21st (today) of October 2019.

Here are some of the most interesting articles I came across over the course of the week.

1. The Angular Team @ AngularConnect 2019 by Stephen Fluin

It was our pleasure to attend AngularConnect again this year and to talk to hundreds of amazing engineers.

This year the team focused on sharing insights and opening the curtain into some of the internals of how Angular works and the challenges we are taking on as a team.

2. Hack for Good By Sebastian Witalec

The Angular and NativeScript teams teamed up last month to organise the first ng-ns Hack For Good — an online hackathon with prizes, where all participants were asked to build mobile apps with NativeScript Angular for NGOs and good causes.

The rules were quite simple: starting from Thursday the 12th of September, participants — working alone or in teams of up to 4 people — had 96 hours to build a Native Mobile App — using NativeScript and Angular.

…

Read Article.

3. Testing Asynchronous Code in Angular Using FakeAsync by Netanel Basal

…

fakeAsync is a special zone that lets us test asynchronous code in a synchronous way. Unlike the original zone that performs some work and delegates the task to the browser or Node.js, fakeAsync buffers each task internally, exposes an API that lets us decide when the task should be executed.

In this article, we’ll learn how we can use it to make async tests predictable, and how it works under the hood. To make the code cleaner and easier to read, in the following examples, I’ll use Spectator. It’ll work in the same way as when using the native testing API directly.

…

Read Article.

4. Angular & CSS Grid: Dynamic Grid Properties by Erxk Verduin

Article Goal: Investigate one way to dynamically modify CSS Grid Properties using Angular’s @HostBinding Decorator.

Article Topics:

• Use CSS-Grid with Angular Components by leveraging the :host selector
• How to adjust CSS Grid Properties such as column-template-rows and gap with TypeScript dynamically.
• Angular’s DOM Sanitizer, why we have to bypass security and some guidelines we should follow when doing so.

Read Article.

5. From AngularJS to Angular : a 2.5 years migration journey by Aurélia Rochat

When I realized I spent 2.5 years migrating an AngularJS application to Angular (among other things), I thought it would be worth telling the story.

The aim of this text is not to present in detail the technical challenges we met nor the solutions we chose, but to explain the journey we undertook while replacing every single line of code in our application codebase.

My idea is to share the mistakes we made, the pitfalls we fell into, and the advice I can give to anyone who is about to begin such endeavor.

To give you an idea of the application size, our github repo counted

118'030 lines of code

1'706 files

in the application src/app folder (typescript, html and scss files included) rightafter the migration was completed.

…

Read Article.

6. Wrapping CommonJS library in Angular 8 directive on the example of mark.js by Alexander Poshtaruk

…

Time to time on my daily tasks I have to implement some functionality that was already implemented by someone previously in a neat vanillaJS library, but… no Angular version or even ES6 module of it is available to be able to easily grab it into your Angular 8 application.

Yes, you can attach this lib in index.html with script tag but from my point of view, it hardens maintainability. Also, you should do the same for another Angular project where you might use it.

Much better for is create Angular wrapper directive (or component) and publish it as npm package so everyone (and you of course:) can easily re-use it in another project.

…

Read Article.

7. RxJS Subjects in Depth by Giancarlo Buomprisco

In this article, I want to explore the topic of RxJS’s implementation of Subjects, a utility that is increasingly getting awareness and love from the community.

In the past, I have used Subjects in a variety of ways, but sometimes not fully understanding what they are internally and what are the main differences with Observables.

Read Article.

8. Multiple HTTP Requests in Angular by Kevin

RxJS can get confusing sometimes and it may not be obvious at first how to do certain things. One of these things may be how to do multiple HTTP requests the right way - but gladly it’s not too complicated.

There might be two different cases for executing multiple requests; either one by another (sequentially) or simultaneously (parallel).

Read Article.

9. Exploring web APIs Observers — real life examples explained! By Liron Hazan

If you enjoys diving into mdn there’s a chance you recognized few web APIs which ends with the “Observer” suffix.

Those observers are relatively new web APIs (besides the mutationObserver), some of them aren’t supported by all browsers, generally used in observing a certain state of a target element/s and act when detecting that state (by running callback), some came to resolve web traditional ways of knowing when a change occurred (e.g. change of an element/tree, visibility of an element in the viewport etc..) which could be expensive due to calculations who effect performance ( e.g. by triggering reflow/repaint).

…

Read Article.