Spend Your Xmas Break Catching Up on the Hottest Trends in Angular

Published in

Netanel Basal

11 min readDec 24, 2018

It’s that time of year again — time to look back at everything that came our way. Whether it’s new Akita features, innovations in Angular, testing with Spectator, or in-depth looks at JS and RX functionality, they were all featured in my articles. As 2018 draws to a close, I’ve linked all my articles from the past 2 years here for easier access.

Simulating Events in Angular Unit Tests

In this article, I will walk you through the process of triggering events when writing unit tests for Angular…

netbasal.com

Manage HTTP Downtime with Angular, RxJS, and HTTP Interceptors

In a perfect world, everybody would have a fast net connection all the time. But at present, your users can find…

netbasal.com

Creating Searchable Templates in Angular

One of my last assignments was to develop generic method to make components and templates searchable in our…

netbasal.com

Things Worth Knowing About Dynamic Components in Angular

In this article, I would like to answer a question that was asked yesterday on Twitter by Sani Yusuf and also add more…

netbasal.com

Loading External Libraries on Demand in Angular

Loading External Libraries on Demand in Angularnetbasal.com

Connection-Aware Components in Angular

The navigator.connection object contains a read-only property named effectiveType, which returns the effective…

netbasal.com

OOP and RxJS: Managing State in React with Akita

Managing State in React with Akita

Managing State in React with Akitaengineering.datorama.com

Connect Angular Forms to Akita Store

The PersistNgFormPlugin helps to keep your form synced with your store. One common scenario is preventing your user…

netbasal.com

Why It’s Important to Unsubscribe from RxJS Subscription

In this article, we’ll learn why it’s important to clean our subscriptions. Let’s set up a realistic Angular example.

netbasal.com

What’s New in Akita v1.9: Small Things That Make You Happy

Akita has reached v1.9, and it’s time to summarize the new features we’ve added.

medium.com

Accessibility Made Easy with Angular CDK

Keyboard focus and navigation are essential when developing for the accessible web. Many users rely on a keyboard when…

netbasal.com

Three Ways to Dynamically Alter your Form Validation in Angular

Dynamic form validation in Angular

netbasal.com

Getting to Know the Angular CDK Drag and Drop Feature

Angular material/cdk version 7.0.0-beta is now available. In this release, we have two new exciting features we all…

netbasal.com

DIY Subscription Handling Directive in Angular

In this article, we’ll learn how to manage subscriptions in the template with a bit more elegance. We’ll see the…

netbasal.com

Animate Dynamic Components in Angular

In this article, we’ll learn two different techniques to animate a dynamic component in Angular as it enters and…

netbasal.com

Introducing Angular Schematics for Akita

akita-schematics provides CLI commands for generating files when building new features with Akita. Built on top of…

engineering.datorama.com

Introducing the New KeyValuePipe in Angular

Angular version 6.1 has been released and it’s shipped with a new useful pipe — KeyValuePipe .

netbasal.com

👻 Who’s Afraid of Observables?

In this article, we’ll create a simple implementation of the observable pattern and work to understand the core…

netbasal.com

💣 What’s New in Akita for Angular: We’ve Added Your Top Requested Features 🔥

It’s only been three weeks since Akita’s latest release and we’ve already come up with hot new features ! (v1.2.0)

engineering.datorama.com

Working with Normalized Data in Akita and Angular

In this article, we’ll build an Angular application which lists movies which arrive from a nested API response. We’ll…

netbasal.com

RxJS: Eight Operators Worth Getting to Know

# mapTo

netbasal.com

🚀 What’s New in Akita v1.1.0 🔥

It’s only been two weeks since Akita’s initial announcement, and the response has been tremendous. We want to thank…

engineering.datorama.com

Angular Components: Tips and Tricks

One of my latest assignments was to develop a custom drop-down component which supports both single and multiple…

netbasal.com

👷 Building a Shopping Cart in Angular Using Akita

This is the second part of the introduction to Akita (the first part can be found here). In this part, we’ll create…

engineering.datorama.com

🚀 Introducing Akita: A New State Management Pattern for Angular Applications

Every developer knows state management is difficult. Continuously keeping track of what has been updated, why, and…

netbasal.com

Getting to Know the Angular CDK Virtual Scroll Feature

Angular CDK Virtual Scroll

Feature Angular CDK Virtual Scrollnetbasal.com

📢 Getting to Know Angular Differs

Angular differs are probably the least known APIs; These are highly optimized building blocks used by Angular itself…

netbasal.com

Why It’s Time to Say Goodbye to Angular Template-Driven Forms

Angular gave us the powerful tool that is reactive forms. As a result, I’ve opted to stop using template-driven forms…

netbasal.com

👩‍🎨 Introducing Themify: CSS Themes Made Easy

Themify is a new postcss plugin that generates your application themes during the build phase and lets you manage them…

engineering.datorama.com

🚀 A Comprehensive Guide to Angular onPush Change Detection Strategy

👉 Default Change Detection Strategy

netbasal.com

Angular Services do NOT have to be Singletons

As you probably know, when we add a service to a @NgModule() declaration, it will be a Singleton. Meaning, it will live…

netbasal.com

Testing Observables in Angular

In this article, I’d like to talk about a misconception I’ve read in other articles about writing tests for observables…

netbasal.com

A Smaller Bundle with Const Enums in TypeScript

Enums allows us to define a set of named constants. By using enums we can keep our code DRY, easy to refactor, and more…

netbasal.com

🎊 Create Angular Libraries in No Time Using Schematics 🎉

Maybe it’s just me, but since Angular was released, creating an open source library has been no simple task.

netbasal.com

😎 Sexier Imports in TypeScript 👻

In almost every application that does not use the technique we’ll talk about, we’ll see imports such as the following:

netbasal.com

Demystifying the Dependency Inversion Principle in Angular

In this article, I’d like to talk about the letter D in the SOLID principles and how we can implement it in Angular…

netbasal.com

Using TypeScript Dynamic Imports in Angular

TypeScript 2.4 added support for dynamic import() expressions, which allow us to asynchronously load and execute…

netbasal.com

Getting to Know the @Attribute Decorator in Angular

The @Attribute decorator is one of the least known and least used, but in some cases, it can bring a performance boost…

netbasal.com

Understanding mergeMap and switchMap in RxJS

Higher order observables are one of the most influential features in Rx. They’re also one of the most difficult to…

netbasal.com

Create Powerful Action Menu with Angular and Popper

In almost every web developer’s career, there’s a point where he needs to create a custom drop-down or action menu to…

netbasal.com

Better Code Organization with Angular DI Multi Option

In almost every application there is a file where we throw all our application endpoints. If you are working with…

netbasal.com

The Importance Of Abstraction in JS

JavaScript is no longer what it used to be. The Web has evolved in an extraordinary way. Yes, you know what I’m talking…

netbasal.com

Using Pipe Results in Angular Templates

Let’s say you need to build a filter pipe which is responsible for filtering lists in your application.

netbasal.com

Getting To Know The JavaScript Internationalization API

Let me start by boring you with the official definition from Wikipedia:

netbasal.com

Exploring The Undocumented APIs Of Material CDK

Platform

netbasal.com

Querying For The Closest Parent Element in Angular

Imagine that you have a component with a nested structure. You’ve found a case where one of the children needs to run…

netbasal.com

Using Angular Components with Third-Party Libraries

As developers, we aim to use existing libraries in order to avoid reinventing the wheel. Unfortunately, Angular is…

netbasal.com

What’s new in Angular v5: Animations

Angular version 5 is here and with her a new wave of features. In this article, I want to explore what’s new in…

netbasal.com

Implementing Dynamic Views in Angular

In this article, I will show you how to solve a common problem using the Angular way. Imagine that you have a layout…

netbasal.com

Getting To Know The Partial Type in TypeScript

I don’t usually bother to write about such small things, but I’ve come across many people who don’t know this handy…

netbasal.com

Boosting Performance With The New updateOn Option in Angular v5

Angular version 5 is about to drop and with her a new wave of features. In this article, I want to expatiate on a handy…

netbasal.com

Create and Test Decorators in JavaScript

I remember the first time I saw this sexy symbol. Yes, you know what I’m talking about. The at sign (@), above or…

netbasal.com

Angular Tests Made Easy With Spectator

Writing tests for our code is part of our daily routine. When working on large applications with many components, it…

netbasal.com

Building a Simple Carousel Component with Angular

In this article, we will create a simple carousel component with Angular that includes animation with the help of the…

netbasal.com

Disabling Form Controls When Working With Reactive Forms in Angular

When working with Angular Reactive Forms there are times when you need to disable/enable a form control, for example:

netbasal.com

Create Advanced Components in Angular

In this article, we are going to learn how to create a dynamic component that uses ng-content. We are going to learn…

netbasal.com

Angular — Formatters and Parsers

If you’ve worked with AngularJS, you probably remember the ngModelController parsers and formatters options. Parsers…

netbasal.com

Optimizing the Performance of Your Angular Application

1. Using OnPush

netbasal.com

Understanding the compareFn Input in Angular

The compareFn input comes to solve a specific problem. Imagine that you have a select box in your application, For…

netbasal.com

Angular Quick Tip — How to Show a Placeholder in Select Control

I find it very strange, but two times people have asked the same question in SO and still have not found a satisfactory…

netbasal.com

Implement ngModelOptions with RxJS and Custom Form Control in Angular

If you’ve worked with AngularJS, you probably remember the ng-model-options directive.

netbasal.com

✋ Enough with the Frameworks War 😡

Today, I would like to talk about something that personally hurts me very much.

netbasal.com

The Power of Selectors in Angular

When working with third-party components, there are times when you need to add missing functionality.

netbasal.com

Angular Custom Form Controls Made Easy

Imagine that you need to implement an auto-expand textarea for one of your forms.

netbasal.com

Leverage Structural Directives to Create Powerful Components in Angular

In this article, we’ll learn how to create a powerful drop-down component with the help of structural directives.

netbasal.com

How to Integrate reCAPTCHA in your Angular Forms

In this article, we are going to implement from scratch a reCAPTCHA directive for Angular applications including the…

netbasal.com

Testing Dumb Components in Angular

Why Test my Code

netbasal.com

Implementing Auth Guard with Componentless Route in Angular

I see a lot of different implementations of Auth Guards around the web. The implementation is quite simple. In most…

netbasal.com

RxJS Subjects for human beings

I have already published an article on the subject, but this time I want to take a different approach.

netbasal.com

Inspiration for Custom Decorators in Angular

This post assumes that you at least have some working knowledge of Angular and Decorators.

netbasal.com

When to Unsubscribe in Angular

As you probably know when you subscribe to an observable or event in JavaScript, you usually need to unsubscribe at a…

netbasal.com

Implementing Event Modifiers in Angular

One of my favorite libraries is Vue. There’s a cool feature in this library that I want to steal for my Angular…

netbasal.com

🎩 Automagically Unsubscribe in Angular

As you probably know when you subscribe to an observable or event in JavaScript, you usually need to unsubscribe at a…

netbasal.com

Exploring The New Meta Service in Angular Version 4

In Angular version 4 we have a new Meta service.

netbasal.com

Take Advantage Of The Let Operator in Angular

Imagine that you have a general input component for your application.

netbasal.com

Handling Multiple Checkboxes in Angular Forms

This post assumes that you at least have some working knowledge of Angular reactive forms.

netbasal.com

The Power of Structural Directives in Angular

What’s a Structural Directive?

netbasal.com

Understanding ViewChildren, ContentChildren, and QueryList in Angular

There are times when a parent component needs access to his children. Let’s see how we can handle this with Angular.

netbasal.com

🎊 Event Emitters in Angular 🎊

When you start learning Angular one of the first things you learn is how to communicate between child and parent…

netbasal.com

Dynamically Creating Components with Angular

In this article, we will learn how to create components in Angular dynamically.

netbasal.com

The Power of ViewChildren in Angular

We can use the ViewChildren decorator to get the QueryList of elements or directives from the view DOM. In this…

netbasal.com

Recursion in Angular Components

There are times that you need to render a template recursively. For instance, when you have a page with comments, you…

netbasal.com

Exploring the Various Decorators in Angular

@Attribute —

netbasal.com

RxJS — Six Operators That you Must Know

1. Concat —

netbasal.com

JavaScript — Make your Code Cleaner with Decorators

When working with JavaScript, you sometimes need to use the setTimeout function to force some piece of code to run at…

medium.com

Clean Up Your Angular Form Template

In my previous article, we talked about how to show form errors on submit.

netbasal.com

Show form errors on submit in Angular

If you are like me, you probably think that the best point to show to users the form errors is when the user submits…

netbasal.com

Understanding ngDoCheck and KeyValueDiffers in Angular

In this article, we are going to learn why we need the ngDoCheck life cycle hook and the KeyValueDiffers service by…

netbasal.com

Give your modals URL address with Auxiliary Routes in Angular

In this article, I’m going to show you how you can create modals and provide them with the ability to act like a “real”…

netbasal.com

Understanding Subjects in RxJS

Before we start, this article requires basic knowledge in Rx.

netbasal.com

Getting to Know the ng-container Directive in Angular

In many cases when working on your app, you forced to wrap your content with an additional tag when using structural…

netbasal.com

Persisting user authentication with BehaviorSubject in Angular

In this article, I will show you how to manage user authentication status with the help of the BehaviorSubject.

netbasal.com

Typescript — Integrate jQuery Plugin in your Project

By: Netanel Basal (Angular Expert) and Yaron Biton, misterBIT.co.il CTO

medium.com

Angular 2 ngFor— Not only for Arrays

As developers, sometimes we need to render a list and let the user the ability to add more values to the list.

netbasal.com

Angular 2 — Use Your own HTTP Library

Angular is flexible enough to let you use your desired HTTP library without worrying about change detection thanks to…

netbasal.com

Angular 2 — Deal with Different Form Controls Cheat Sheet — Template vs Model

Select box:

netbasal.com

Understanding ViewContainerRef in Angular 2

If you ever needed to insert new component or template programmatically, you probably used the ViewContainerRef…

netbasal.com

Angular 2 Router — RouterOutlet Events

I want to share with you something that I discovered when going through the router source code.

netbasal.com

Using 3rd Party Library Inside Angular2

By: Netanel Basal (Angular Expert) and Yaron Biton, misterBIT.co.il CTO

netbasal.com

Angular 2 — Making your component auth-aware

By: Netanel Basal (Angular Expert) and Yaron Biton, misterBIT.co.il CTO

netbasal.com

Angular 2 — Explore The Renderer Service

By: Netanel Basal (Angular Expert) and Yaron Biton, misterBIT.co.il CTO

netbasal.com

The Magic Behind Event Emitter in JavaScript

What is Event Emitter?

netbasal.com

Let’s Talk About Select and Reselect in @ngrx/store

Recently I released a new state management pattern. You should check it out.

netbasal.com

Managing State in Angular Apps with ngrx/store and ngrx/effects (Part 1)

Recently I released a new state management pattern. You should check it out.

medium.com

Angular 2 Forms — Create Async Validator Directive

By: Netanel Basal (Angular Expert) and Yaron Biton, misterBIT.co.il CTO

netbasal.com

Angular 2 — Escape From Change Detection

Change Detection in Angular 2

netbasal.com

Angular 2 — Take Advantage Of The exportAs Property

You wake up in the morning, and you decide to be a good developer by creating an open source Angular directive.

netbasal.com

Angular 2 Security — The DomSanitizer Service

By: Netanel Basal (Angular Expert) and Yaron Biton, misterBIT.co.il CTO

netbasal.com

Angular 2 — Custom Exception Handler

When we are developing our app, we are in control, and we can see the errors and handle them appropriately.

netbasal.com

Angular 2 — Improve Performance with trackBy

The Problem:

netbasal.com

Connect Angular Forms to @ngrx/store

In this article, we will learn how to connect Angular forms to ngrx/store with ngrx/effects.

netbasal.com

Follow me on Medium or Twitter to read more about Angular, Akita and JS!