If you’ve never heard of or used MatList, it is a container component provided by Angular Material to display a simple list of items on UI. MatList also provides cool features in addition to text rendering, such as navigation lists, action lists, selection lists, lists with icons etc. However, the main disadvantage of using this component is that it’s only designed for a small set of items. If the list is virtually large (>1000 items) it may impact the performance and sometimes cause the browsers to crash. Lucky for us, Angular CDK has a package called Virtual Scrolling that helps…

In recent years, TypeScript (TS) has become one of the most popular programming languages among web community. It is basically a strictly typed version of JavaScript and so much more. Thanks to its strong type checking, inline documentation and great community support; TS has been adopted heavily by major JavaScript frameworks like Angular, React and Vue. In this article, we will go through several handy TS operators that can help you reduce boilerplate and make your codes look cleaner and easy to read.

Note that different operators demonstrated below might only be available at specific TS version.

Template Strings — TS v1.4

When building web…

If you are a JavaScript developer like me you won’t be surprised how often array data structure is being used in the code in order to store and manage lists of data. The problem with arrays in JS is that they are easily mutable due to “passing by reference” nature in JS. In addition to that, array immutability can be a challenging problem since developers usually get turned off by confusing syntax or didn’t do it properly. In this article, we will go through some common techniques to help you become familiar with how to prevent array mutation in JS.

Generate Arrays

…

I have worked with Angular Material for several years and I love how easy it is to integrate their components into my apps. Among some of the most popular components like MatTab and MatTable, I often use MatExpansionPanel to render data that regulates a parent-child relationship. The problem with MatExpansionPanel is that it will automatically close when the data is getting updated. For example, assume we have a list of parent folders which also contain several sub folders that need to be loaded at runtime. The issue occurs right after sub folder data is loaded. Since the data structure has…

1. What is Reactive Programming?

Reactive programming is one of the most popular programming patterns in which the application asynchronously reacts to a data stream or change in states. This type of programming is very well known on front end development especially on building a single page application because it allows the app to respond to different types of inputs like user events, messages, server calls, etc. which do NOT usually happen in concurrent with the main flow.

We, as developers, often confuse the word “reactive” with “responsive” or use them interchangeably to describe a web page. In terms of front end development, the word…

With the new release of Angular 10 coming out recently, Material team announced there is a new type of component joining the group of Datepicker module called Date Range Picker (DRP). It allows users to pick consecutive set of dates in one calendar picker. Yes you heard that right: in one single calendar picker. Back in the day, developers often created 2 separate datepicker components to hold the values of startDate and endDate. …

If you are tired of handling forms in your Angular apps, you’re in the right place. This article doesn’t help you avoid working with form entirely but provides an awesome way to reduce code boilerplate so you don’t have to build your form over and over again.

This article is the second part of 2 part series. If you have not read the first part I’d recommend you to pause right here and take a look at how we construct dynamic form before diving into new stuff.

Consuming Dynamic Form

For the second part, we focus on consuming the dynamic form. To use…

If you are tired of handling forms in your Angular apps, you’re in the right place. This article doesn’t help you avoid working with form entirely but provides an awesome way to reduce code boilerplate so you don’t have to build your form over and over again.

In case you don’t know, I had an article showing how Angular helps build HTML templates dynamically using JSON configurations. We will follow the same pattern presented in this article but with forms this time.

1. Overview

A web form usually contains one or many input fields such as a regular text, a select dropdown…