NgTemplateOutlet is one of the most overlooked features in Angular. In fact, it is designed to cater some very specific scenario that alternative is hardly found. It can highly improve the code quality when used correctly. Here I have summarized four practical use cases of NgTemplateOutlet that can fit in many projects.

Image from Evolution SKF

1. Create reusable HTML blocks

The most intuitive way to use NgTemplateOutlet is to handle shared HTML codes. It works very similar to an anonymous function, but for HTML instead of JavaScript.

<ng-template #testTemplate>
<div>Some Code.</div>
</ng-template>

<ng-container *ngTemplateOutlet="testTemplate"></ng-container>
<ng-container *ngTemplateOutlet="testTemplate"></ng-container>

We can put the shared HTML inside a <ng-template> and “call” it…


Drag and drop list reordering is a very common feature of webpages with lists of data, such as Trello, Jira, etc. It is also a frequently asked question during frontend developer interviews. It was once one of the most difficult features to implement due to huge amount of DOM manipulations and overlap calculations. Yet, with the help of the HTML drag and drop API and modern frontend frameworks, this feature now only needs tens of lines to implement.

Here I am going to go through an example on implementing the drag and drop reordering feature in an exiting page with…


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 {…

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