Follow me on Twitter at @NikPoltoratsky | Subscribe to the Newsletter | Originally published on howtomake.software.

If you already built a few Angular applications it might be you already spotted how it may be tricky to build easily configurable modules.

I mean, if you’re building a reusable module it might be you need to configure it somehow. And if this module contains different entities (multiple components, services, directives, and pipes) it will be hard to configure them separately. It would be better to configure the whole module in one place.

For example, let’s take a look at the Angular material…


Learn why ngrx reducer is called reducer and how it is related to the JavaScript array reduce function

Originally published at https://howtomake.software.

Why reducer is reducer?

In this article, I’m introducing my mental model of modern state management.

More exactly I’m talking on how ngrx works, why reducer is a reducer, and how it is related to the JavaScript’s array reduce method. All the statements here will likely be true for any state management solution using redux concepts. So, if you’re using Redux, you’re welcome 🤓.

At this article we’ll cover:

  • What is ngrx?
  • What is array reduce?
  • Understanding reduce concept
  • So, why reducer is reducer?

What is ngrx?

If you have no experience with ngrx or other redux like state management solutions, I would personally recommend you to learn…


11 tips on how to make your Angular app more accessible

AngularInDepth is moving away from Medium. This article, its updates and more recent articles are hosted on the new platform inDepth.dev

Nowadays approximately 15% of people have some kind of disability that doesn’t allow them to use web applications in a common way — keyboard, mouse, touchscreen. That’s where accessibility comes on to the stage.

Accessibility is the practice of making your websites usable by as many people as possible. We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those…


AngularInDepth is moving away from Medium. This article, its updates and more recent articles are hosted on the new platform inDepth.dev

The Angular framework was designed with flexibility in mind. That approach allows Angular applications to be executed across different environments — browser, server, web-worker, and even mobile devices are possible.

In this series of articles, I’m going to reveal to you how does it even possible — execute Angular applications across different environments. Also, we’ll learn how to build custom Angular platform which renders applications inside the system’s terminal using ASCII graphics.

Articles:


AngularInDepth is moving away from Medium. This article, its updates and more recent articles are hosted on the new platform inDepth.dev

The Angular framework was designed with flexibility in mind. That approach allows Angular applications to be executed across different environments — browser, server, web-worker, and even mobile devices are possible.

In this series of articles, I’m going to reveal to you how does it even possible — execute Angular applications across different environments. Also, we’ll learn how to build custom Angular platform which renders applications inside the system’s terminal using ASCII graphics.

Articles:


AngularInDepth is moving away from Medium. This article, its updates and more recent articles are hosted on the new platform inDepth.dev

The Angular framework was designed to be a platform independent. That approach allows Angular applications to be executed across different environments — browser, server, web-worker, and even mobile devices.

In this series of articles, I’m going to reveal to you how does it even possible — execute Angular applications across different environments. Also, we’ll learn how to build custom Angular platform which renders applications inside the system’s terminal using ASCII graphics.

Articles:

  • Angular Platforms in depth. Part 1. …


AngularInDepth is moving away from Medium. This article, its updates and more recent articles are hosted on the new platform inDepth.dev

When web applications are properly designed and coded the users of assistive technologies can use them easily. However, we’re not always paying enough attention to the a11y issues. One of the reasons is that it may require significant efforts to make applications accessible.

Luckily, there are tools that can speed up a11y development for our Angular applications. A number of powerful tools are distributed within @angular/cdk package.

One of the issues the Angular CDK can help us with is…


Introduction

If we want to use Angular forms bindings with custom form controls we need to implement ControlValueAccessor interface.

Let’s assume we have a button with a counter that increments each time the user clicks on it.

And we need the ability to use it with the Angular forms API like so

<counter-button [formControlName]="counter"></counter-button>

Step 1: Implement ControlValueAccessor interface

First of all, we need to implement ControlValueAccessor interface.

Step 2: Implement writeValue

writeValue(obj: any): void is the method which writes value from the data model to our custom control.

Step 3: Implement registerOnChange

registerOnChange(fn: any): void registers the callback that has to be called to propagate changes back to the model…


Introduction

We usually use predefined Angular pipes to prepare data for presentation, for example, lowercase and date pipes. But from time to time we need to create custom pipes. Let’s assume we need to create a debug pipe that will console.log all passed values.

{{ user.email | debug }}

Step 1: Create a pipe class

First of all, we need to create a pipe class and mark it as an Angular pipe.

Step 2: Implement PipeTransform

Then we have to implement PipeTransform interface — create the transform method that will receive value, log it and return.

Step 3: Add pipe to declarations

The last thing we need to do is to add MyPipe to the module declarations.

Shot

Here is the final shot, ready to use.

Useful Links

  1. Angular Pipes — https://angular.io/guide/pipes


Introduction

There is a bunch of cases when you need to listen to Router events in Angular applications, for example, to show navigation loaders or show user navigation errors.

Step 1: Inject Router

Firstly, we have to inject Router in the component which will listen for events.

Step 2: Subscribe on events

Then, we subscribe to Router events.

Step 3: Handle type of event

Router events stream fires all router events. That’s why we have to use instanceof to filter only required events for instance NavigationStart.

Shot

Here is the final shot:

Useful Links

  1. Routing and Navigation

Nikita Poltoratsky

Developer Advocate at Akveo · Tech Author · Nebular and Ngx-Admin team · Minsk, Belarus

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store