The Power of Single-Element Collections in Angular

The Power of Single-Element Collections in Angular

Avoid creating a complex maze of setters

Avoid creating a complex maze of setters

Miniature action figure

Photo by  Esteban Lopez on  Unsplash.

Today, I want to share my thoughts on the power of using single-element collections in Angular apps. I find use cases for this very often in my daily work, so maybe you’ll find it useful also.

Let’s start with something typical:

<workitem-card 
  *ngFor="let item of selectedWorkItems"
  [item]="item" 
> 

We’ve seen such code many times and it looks very natural to us. Whenever we add a new element to the selectedWorkItems array, Angular will initialise a new instance of the component and render it within the view. Business as usual.

Now consider this: The selectedWorkItems collection can have either 0 or 1 element.

In such a scenario, is there still a place for the *ngFor or should we switch to a single selectedWorkItem field on the component?

programming angular javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Updating From Angular 10 to Angular 11

Updating from Angular 10 to Angular 11. In 2020, Angular received three stable update (Version 9, 10, and 11,) each introducing a few significant changes. We’ll focus on the last two, Angular 10 and Angular 11, the rule is currently facing issues, especially for packages like update @angular/core.

How to Use JavaScript Libraries in Angular Project

In this tutorial, you'll learn how to use JavaScript libraries in Angular project. Using a JavaScript library inside an Angular project is not as straightforward as using it in Angular JS or a plain JavaScript project.

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.