Issue 20  December 7th 2018

Total Guide To Angular 6+ Dependency Injection — providedIn vs providers:[ ] 💉

Do you know the difference between providers: [] and the providedIn syntax? Tomas explains how and why you should use both options in your applications.

We can think about providedIn as specifying dependencies in reverse fashion. Instead of a module providing all its services, it is now the service itself declaring where it should be provided…

Angular - Splitter and Aggregation patterns for ngrx/effects

The Splitter and Aggregation patterns can be particularly useful for Angular applications that have complex API interactions facilitated by NGRX effects.

Effects in NGRX usually only react to single actions (via the .ofType operator), but if we send out two API calls we need an effect that reacts to two (success) actions. This raises a more fundamental design question: How can we orchestrate multiple actions (bring them in the right order, wait for all of them to finish, etc.) and after that continue with the remainder of the effect.

Learn how to efficiently manage your application state without sacrificing performance.

Angular Console – Angular Blog

The team at NRWL has released the Angular Console, a GUI developer tool that adds a visual layer to the Angular CLI. Whether you're an Angular CLI expert or just getting started developing Angular CLI based applications, the Angular Console aims to help you better learn how to leverage the CLI.

In its current form, Angular Console aims to provide an easy to understand interface for the Angular CLI. The mental model it attempts to convey through Console’s UI design is merely a reflection of the core concepts used by the CLI itself. We believe that mirroring the CLIs mental model through a GUI is beneficial for both experts and novices writing Angular code.

Using The "Definite Assignment Assertion" To Define Required Input Bindings In Angular 7.1.1

Have you ever wondered how to to define required properties / input bindings for your directives? Rather than making those properties optional in your directive, you can use the Definite Assignment Assertion syntax available in Angular 7.1.1.

The Angular team has started to use this TypeScript feature to denote required Class properties as defined even though they won't truly be defined until after the directive's class constructor has been executed.

Creating a custom form field control compatible with Reactive Forms and Angular Material

This tutorial demonstrates how to integrate a rich text editor like Quill with an Angular reactive form and Angular Material using a custom value accessor. The accessor is created by registering a NG_VALUE_ACCESSOR provider and implementing ControlValueAccessor interface methods. The end result is a custom rich text editor that includes all of the features that come with <mat-form-field> such as floating placeholder, prefix, suffix, hints, and errors.