Anonymous function is one of the most overlooked features in the world of JavaScript. Yet, when used correctly, it can highly improve readability and reduce line of codes. Here I would like to introduce a trick that use anonymous function for assignment, which I find extremely useful.

Image from Gift Ideas Unwrapped

The Problem

Modern coding practices suggest using const for variables that we know they won’t change. However, it becomes a bit messy when there is condition.

Say we have several conditions and we want to assign different values based on different conditions, we will end up with a long assignment chain like this:

const a…

Before the invention of modern JS frameworks, most websites were built with static HTML plus classic JS libraries, such as jQuery. Many practices have been formulated based on this stack, but some of them may no longer applicable with modern frameworks nowadays. Here I have summarized four classic web development practices that are not suitable anymore for Angular.

Image from Search Engine Land

1. Manipulating instances

Element selector plays an important role in classic web development. When we want to perform action on an element, we use the selector to get the corresponding instance and manipulate the instance directly. Selecting and manipulating instances is a common and the…


Pages refer to the outermost components that combine multiple smaller components to form the views for users. They are usually the least generic component among the whole code base. In order to suit the very specific UI/UX requirements, it is very common for pages to have clumsy logic across multiple smaller page components, which create strong coupling. These codes are difficult to maintain and develop as states and logic are all interdependent. Here I would like to introduce how we can use a service to maintain a single source of truth, which can highly reduce the code complexity.

Image from arachnys.com

Example

Say we…


Pipe is a powerful feature in Angular to achieve data transformation in templates.

@Pipe({name: 'trim'})
export class TrimPipe implements PipeTransform {
transform(value: string): string {
return value.trim();
}
}
@Component({
template: `{{ value | trim }}`,
...
})
export class AppComponent {...}

However, not many Angular developers like working with custom pipe due to the fact that it is more heavy weighted than a static Util class, with more codes to write, classes to maintain and restrictions for usage. The same functionality implemented with a static method is usually cleaner than the one wrapped in a custom pipe.

export class…


Function.prototype.bind is a built-in function, which creates a new function with the context bound to the context given from the parameter. The major use case for this function in Angular template is the property binding (@Input) of function.

<app-test-component 
[testFunction]="printValue.bind(this)"></app-test-component>

This helps to maintain the context scope when the function is executed inside the component. It is a relatively uncommon function nowadays that some Angular developers may not have even seen it before. Yet, if you have been using it in your templates, I highly recommend you to stop doing that as it leads to performance issue.

Image from SecurEdge

The Issue

In short, the…


The function-like HTML segment refers to a block of HTML with the ability to accept context variables (in other words, parameters). A typical Angular component has two major parts of logic, a HTML template and a Typescript class. The capability to utilize this kind of function-like HTML segment is essential for a good shared component. It is because a shared component with only a fixed HTML template is very difficult to fit all the needs among all different use cases. …


Router outlet is one of the most frequently used elements in Angular to design modern websites. Here I would like to introduce a more advanced and lesser known feature of router outlet — named router outlet. This is a very powerful feature of Angular router that is capable to tackle some difficult use cases. Besides, I would like to introduce a hack to create your own URL, which you may want to use together with the named router outlet.

Image from Peter Cohen

What is named router outlet?

It is a feature designed for applications with multiple router outlets. A single router outlet is usually enough for most modern…


Component is the basic building block of Angular applications. A typical Angular application is consisted of many separated components. Normally, each component usually represents one particular feature. Yet, there are some complicated features that need to use multiple components to implement, for example, DropDownComponent and DropDownGroupComponent:

<drop-down-group>
<drop-down>...</drop-down>
<drop-down>...</drop-down>
<drop-down>...</drop-down>
</drop-down-group>

Data sharing is the most difficult part to solve when implementing this kind of interdependent components. Here I have summarized four common built-in approaches to tackle the communication problem.

Image from Deiser Blog

1. Component Injection

The simplest approach to establish a direct communication channel is through component injection from the children.

@Component(...) export class DropDownComponent…


The parent with dynamic children pattern is a common pattern in Angular for developing interdependent components with advanced features. Here I would like to explain with an example using Google map:

<google-map [key]="apiKey">
<google-map-marker *ngFor="let marker of markers"
[lat]="marker.lat"
[lng]="marker.lng">
</google-map-marker>
</google-map>

The <google-map> is the parent component, which initializes and renders the Google map. The <google-map-marker> is the child component that can be dynamically added to create markers on the map. Here is a guide about how you can use component injection to implement this kind of components.

Image from Lattice

What is component injection?

This is a very useful feature powered by the Angular dependency…


Inheritance is one of the most popular ways to reuse code in Angular. It has been used very frequently to build components. Yet, not many developers will apply inheritance to service. In fact, service inheritance is much cleaner and easier to maintain comparing with component inheritance. It can be a good alternative of component inheritance in some cases.

Image from LEADon University

Getting started

Inheritance can be applied either on an abstract class or a concrete class. However, the best practice is to always create an abstract class to encapsulate the logic and reduce noise for other developers working together. Here is an example:

@Injectable() abstract…

Liu Ting Chun

Web developer from Hong Kong. Most interested in Angular and Vue. Currently working on a Nuxt.js + NestJS project.

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