These features will make you fall in love with Angular again

Happy New Year! This is my first post of 2021. Last year was challenging for everyone but above all things, I was thrilled and grateful for the fact that tech communities were working extremely hard to deliver better experiences for all developers around the world. It was a great year specifically for Angular community as the Angular team had released 3 major versions(9, 10, 11) in a span of 12 months. In this post, we will look at five old and new features that undoubtedly contribute to making your Angular experiences more exciting.

1. Skip installing node_modules (v. 7)

The first feature I want to introduce…

Handle large lists of items with ease

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…

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.

Template Strings — TS v1.4

When building web…

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

You can’t believe how easy and simple it is

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…

A deep dive into Reactive World

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…

The most requested component is now available in Angular 10

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!!!

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…

Make Reactive Form Great Again!!!

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…

Not a new approach but fewer have done it

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…

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