The array does not yield any values when utilizing Angular CLI

Recently, I created a component that contains an array of strings. Here's the code snippet for reference:

import {Component} from '@angular/core';

@Component({
  selector: 'app-products-list',
  templateUrl: './products-list.component.html',
  styleUrls: ['./products-list.component.css']
})
export class ProductsListComponent {
  products = ['test1', 'test2', 'test3'];

  constructor() {
  }

}

After defining the array, I tried to display it in my HTML file (products-list.component.html). This is how I included it:

<p>products-list works!</p>
<ul>
  <li *ngFor='let product in products'>
    {{product}}
  </li>
</ul>

I noticed that when I run this in Angular, it only displays the paragraph tag "products-list works!" and not any of the strings from the array as list items. Can someone explain why this might be happening? I apologize if this is a trivial question, but I am still new to learning Angular.

Answer №1

Give this a shot, try utilizing the word "of" rather than "in".

<ul>
  <li *ngFor="let item of items">
    {{item}}
  </li>
</ul>

Answer №2

<p>The products-list is functional!</p>
  <ul>
    <li *ngFor="let product for 
        products"> {{product}}
    </li>
  </ul>   

This code will generate the following HTML:

<ul>
  <li>test1 </li>
  <li>test2</li>
  <li>test3</li>
</ul>

NgFor is a useful built-in template directive that allows for easy iteration over arrays or objects to create templates for each item.

  • The use of 'let' creates a local variable accessible within the template.
  • Using 'of' specifies the iterable to iterate over in our component.
  • The '*' character before ngFor creates a parent template, which is a shortcut for the syntax: template=“ngFor let item of items”

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Removing the @Input decorator in Angular's codebase

I am currently working on an Angular project for a class, and I'm facing an issue where removing the @Input decorator from my component is causing the entire application to not load properly. import { Component, OnInit, Input } from '@angular/ ...

Strategies for ensuring that code does not execute in Angular until the API response has been received

Currently, I am facing an issue where I need to wait for data from an API in order to set the value of a variable and use it in an if condition. The problem lies in my uncertainty about how to properly handle this asynchronous task using async and await. ...

Having issues with autocompletion in the input element of Angular 7 Material Design

My Angular 7 application includes a Material Design form with input text fields, and I have not implemented any autocomplete feature within the code. Despite deleting all navigation data from my Chrome browser, I am still experiencing autocomplete suggesti ...

What is the best way to incorporate the TUI image editor for Javascript into my Angular application?

Issue - I'm facing a challenge with my Angular application as I want to integrate Toast UI image editor. However, I am unsure about how to properly add the imports to app.module.ts in order to utilize it. Despite following the npm installation instru ...

Angular 8 hybrid application fails to detect AngularJS components

I recently embarked on developing a hybrid application and took the following steps: Added Angular 8 dependencies Inserted polyfills.ts Removed the ng-app attribute from my root index.html Manually bootstrapped the AngularJs app This is how my Angular i ...

Web performance issues noticed with Angular 8 and Webpack 3.7 rendering speed

My web application is currently taking 35 seconds to render or at least 1.15 seconds from the initial Webpack start. I've made efforts to optimize Webpack, which has improved the launch speed, but the majority of time is consumed after loading main.j ...

The ngIf directive did not initialize the observable in the child component as expected

I'm facing an issue with CompA and CompB in my Angular project. CompA has a child component called CompB, which has an ngIf condition based on an observable that is shared between the two components. When I set this condition to true and call next on ...

"Troubleshooting the placement problem in Angular Material's md-menu

I am currently utilizing the md-component for Angular 2 from Angular Material. I am carefully following the documentation's instructions on how to integrate it into my project, but I am encountering an issue where the menu opens up below the trigger. ...

Using selectors and mappers in Typescript generics

I am looking to create a versatile selector and mapper method. interface State { user: { name: string; age: number; } } const pickName = (state: State) => state.user.name; const selectAge = (state: State) => state.user.age; ...

Utilize Angular for the front-end user interface and Asp.Net for the backend within the same Azure App

I am facing a challenge with deploying Angular and Asp.Net together on the same app service in Azure. Despite defining the Physical Path for the Angular project, it is not visible on the website and instead shows an error. Interestingly, when I deploy only ...

Angular 6 offers a versatile multi-select dropdown feature

Looking to select multiple values in Angular 6 using checkboxes. When selecting a department from the dropdown, a list of employees related to that department is displayed in another dropdown with checkboxes. However, only the last value of the array app ...

Calling gtag("event") from an API route in NextJS

Is there a way to log an event on Google Analytics when an API route is accessed? Currently, my gtag implementation looks like this: export const logEvent = ({ action, category, label, value }: LogEventProps) => { (window as any).gtag("event&quo ...

What is causing the issue with using transition(myComponent) in this React 18 application?

Recently, I have been immersed in developing a Single Page Application using the latest version of React 18 and integrating it with The Movie Database (TMDB) API. My current focus is on enhancing user experience by incorporating smooth transitions between ...

Unveiling the mysteries of abstract classes in TypeScript

I have a collection of different animal classes, all derived from a common abstract base class. To illustrate: abstract class Animal { abstract speak(): string; } class Dog extends Animal { speak(): string { return "woof... sigh" } } ...

Is it necessary to incorporate ASP.Net MVC alongside Angular?

We are in the midst of developing a brand new web-based product. From the beginning, we committed to utilizing Bootstrap 4, Angular 4 and ASP.Net MVC 5 for the technology stack. However, as our project progresses, we have discovered that other components ...

What is the best way to provide JSON data instead of HTML in Angular?

Is it possible to output processed data as json instead of html? I want to process backend data and output it as json for a specific url. How can I prepare a component to do this? Currently, the app serves html pages where components process backend data ...

Angular routing functions flawlessly on Chrome Mac but encounters issues on Chrome iOS

Encountering a strange issue. My routing is properly configured and has been verified multiple times. Oddly enough, page1, page3, and page5 are functioning correctly, while page2, page4, and page6 fail to redirect as expected. Upon clicking the redirect ...

The journey of communication: uncovering the essence of @input between parent and

I'm diving into Angular and currently working on the @Input phase. Within my main app, there's a child component. Inside app.component.ts, I've declared a test variable that I wish to pass from app.component.ts to child.component.ts. // ap ...

Tips for resolving the error message "TypeError: Converting circular structure to JSON"

I had a straightforward query where I needed to select all from the aliases table. Everything was working fine until I ran npm update. TypeError: Converting circular structure to JSON public async fetchAliases(req: Request, res: Response): Promise< ...

What is the best way to assign an index signature to a plain object?

Currently, I have this object: const events = { i: 'insert', u: 'update', d: 'delete' }; I am struggling to assign an index signature to the object. When I try the following: export interface EventsSignature { [key: ...