Understanding how pipes work under the hood by looking at their implementation details in Ivy

Photo by Samuel Sianipar on Unsplash

Angular’s piping mechanism is something Angular developers use everyday. There’s an excellent article that explores pipes in depth, and the gist of the article is the following:

When pipe is pure, transform() method is invoked only when its input arguments change. Pipes are pure by default.
If the pipe has internal state (that is, the result depends on the state other than its arguments), set pure to false. In this case, the pipe is invoked on each change detection cycle, even if the arguments have not changed.

Another interesting feature of the pure pipes is that Angular creates only one…


Explanation in details about how map and pluck work, and then figuring out main difference between two operators

Photo by delfi de la Rua on Unsplash

Do you think the following code snippet will give the same result?

Well, the answer is: not really. Let’s take a closer look to see the subtle difference.

How map operator works

According to the official documentation, here’s what map operator does

Applies a given project function to each value emitted by the source Observable, and emits the resulting values as an Observable.

But that’s not the full picture. What if an error in projection function occurs? When I deep dive into the implementation of map operator, here’s what I figured out.

map operator implementation

You can see from the above implementation, if…


Photo by Sonja Langford on Unsplash

Angular has a tool that helps developers to measure how long will it take for a change detection cycle on average for a specific screen in your Angular application, but it is turned off by default.

Turn on Angular Debug Tools

To turn this feature on, just make a small change in your main.ts file as below

platformBrowserDynamic()
.bootstrapModule(AppModule)
.then((module) => {
const appRef = module.injector.get(ApplicationRef);
const appComponent = appRef.components[0];
enableDebugTools(appComponent);
})
.catch((err) => console.error(err));

The above code will get a reference to the application and calling enableDebugTools with one parameter is the appRef.

Run change detection and measure the average time

To measure the change detection cycle, in your application, go to…


Using dependency injection to replace redundant logic code

Photo by Max Duzij on Unsplash

In my current project, there’s a block of code that is used in many places. The code looks like this

@Component({
...
})
export class SomeComponent implements OnInit {
constructor(
private route: ActivatedRoute
) {}
ngOnInit(): void {
this.route.params.pipe(
takeUntil(this.destroy$),
map(params => params.id),
filter(v => !!v),
// do something with this id
);
}
}

The above code gets a stream of id from the activated route. In other places, it would be getting the passengerId from activated route, or getting whatever id and do something with it.

So the pattern is that using the ActivatedRoute service to get something…


In this article, I will show you how to create a recurring event date picker form based on options input by user.

From the form, user can select the start date and end date, the frequency they want an event will repeat, e.g. daily, weekly or monthly. Then the number of occurrences will be auto calculated, and the event dates will be displayed accordingly.

By the end of this article, you will be able to build a component like this.

Recurring event date picker final result
Recurring event date picker final result
Recurring event date picker final result

Project setup

First, we will create a new Angular project named recurring-event-date-picker

ng new recurring-event-date-picker
cd recurring-event-date-picker

We will use ng-bootstrap library…


In this article, I’d like to share with you how to create a list of accordion items, which also supports the drag and drop functionality.

We will build two lists, the first is the list of unassigned tasks, and the second is the list of assigned tasks. Users can drag each task and reorder it within the list, or move it from one list to another list.

The end result of this tutorial is as follows.

How to create drag and drop accordion list in Angular
How to create drag and drop accordion list in Angular

So let’s get started…

First we need to import two modules DragDropModule and MatExpansionModule from Angular material.

import { DragDropModule } from '@angular/cdk/drag-drop';

import…

Pham Huu Hien

Angular Enthusiast

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