Understanding Angular CLI: Why Your Array Values Aren't Displaying in HTML

Learn why Angular CLI isn't displaying values from your array and how to fix it with a simple change.
---

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Angular CLI doesn't return any values from array

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding Angular CLI: Why Your Array Values Aren't Displaying in HTML

If you are a beginner diving into Angular, encountering issues while coding is a part of the learning journey. One common problem is when the Angular framework fails to display array values in your application. In this post, we will explore a specific scenario where values from an array defined in Angular are not rendered in the HTML as expected.

The Problem Explained

You have a component where you've defined an array of strings representing products. However, when you try to use this array in your template, Angular fails to render the array contents, only displaying a static message. Here’s an overview of the situation:

Component Definition: You have a ProductsListComponent that contains an array called products. The products are simple strings like 'test1', 'test2', and 'test3'.

HTML Template: In the corresponding HTML file, you've utilized the *ngFor directive to iterate over the products array and display each product.

Expected Output

The expectation is that the list of products should be displayed as list items in the browser:

[[See Video to Reveal this Text or Code Snippet]]

What Goes Wrong?

Instead of the expected output, the browser simply shows the paragraph text: "products-list works!" This is the trouble that our beginner Angular developer is facing.

The Solution: A Simple Fix

The good news is that the solution to this problem is straightforward! The issue is with how the *ngFor directive is written in the HTML template.

Correcting the *ngFor Syntax

Initially, the *ngFor was implemented as follows:

[[See Video to Reveal this Text or Code Snippet]]

However, the correct syntax should use the of keyword instead of in. Here’s the corrected line:

[[See Video to Reveal this Text or Code Snippet]]

Updated HTML Template

With this small adjustment, your updated HTML should now look like this:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By simply changing in to of, you align with Angular's expected syntax for the *ngFor directive. This small correction resolves the issue of displaying the array values in your HTML output.

So, if you ever find yourself in a similar situation where your array values aren't displaying as expected, double-check the syntax of your *ngFor directive. I hope this helps you on your journey with Angular!

Happy coding!