Handle large lists of items with ease

Image for post
Image for post

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 tackle this problem. …


These shorthand operators are truly amazing!!!

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.

Image for post
Image for post

Template Strings — TS v1.4

When building web pages you often need to construct a string from string literals (string constants) along with one or many arbitrary expressions (variable strings). Since version 1.4, TS has supported ES6 template strings to help decompose string objects easily. …


Never have to worry about mutating arrays again with these awesome tips

Avoid Array Mutation in JavaScript
Avoid Array Mutation in JavaScript

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

Array(5).fill(0); …

You can’t believe how easy and simple it is

Image for post
Image for post

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 changed MatExpansionPanel suddenly collapses and the user needs to expand the panel again to view the contents. …


A deep dive into Reactive World

Image for post
Image for post

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 “reactive” describes asynchronous behavior of the app while “responsive” is a web design that rearranges the looks and feels of the web elements in order to adapt to different screen sizes. …


The most requested component is now available in Angular 10

Image for post
Image for post

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


Make Reactive Form Great Again!!!

Image for post
Image for post

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 it, first we need to construct a JSON model for every field in our form. …


Make Reactive Form Great Again!!!

Image for post
Image for post

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, or a date picker etc. If you have a really long form, the task to build and maintain your form will be very tedious and time-consuming. With dynamic form, you are able to abstract parts of logic to create a single input depending on the input type(text, select, datepicker…) passed from parent component. …


Not a new approach but fewer have done it

Image for post
Image for post

Angular developers often “hardcode” all HTML elements directly in the template. This seems fine for smaller components but becomes messy and repetitive when the same elements are expected to be rendered on the screen. Since Angular is an excellent framework for developing dynamic web pages, developers might consider inputting JSON configurations in the components in order to dynamically render HTML elements.

By building HTML from JSON configuration, we are able to:

  • keep the component DRY
  • save JSON configurations to database
  • reuse logic across the application

In this article, we will look at 3 simple examples demonstrating configuration based approach in order to build dynamic templates in Angular apps. …


Doing what the best for myself…

Image for post
Image for post

I love finance and investment. However, pretty much in my life I didn’t have any proper training about how to manage money or make profit from it. In addition to that, living in our current economy makes people feel uncertain about their future and tend to make foolish decisions to survive. Therefore, I decide to document my personal journey to Financial Independence because it’s the final destination where I am going to be when I’m ready to retire.

***Below story depicts my personal experiences with investment. This is not for educational purposes about finance and retirement since I am not a professional financial advisor. …

About

Khoi Bui

Front End architect, opensource contributor and investment enthusiast. New content posted every week.

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