Increasing a value within HTML using TypeScript in Angular

I'm working with Angular and I have a TypeScript variable initialized to 0. However, when trying to increment it using *ngFor in my .ts file, the increment is not happening (even though the loop is running correctly).

my-page.html

<div *ngFor="let item of sn">
  {{myNumber++}}
</div>

my-page.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-stock-modal-one',
  templateUrl: './my-page.html',
  styleUrls: ['./my-page.scss'],
})
export class MyPage implements OnInit {

  myNumber = 0;

  sn = ['a', 'wefwef', 'qwqw', 'qw', 'qw'];

  constructor() {

  }

  ngOnInit() {
  }
}

Can anyone help me figure out what I missed?

Answer №1

I believe the solution you're looking for is to use index instead. Here's a code snippet to help you achieve that:

<div *ngFor="let item of sn; let i = index">
  {{i}}
</div>

Answer №2

One way to show serial numbers is by utilizing the index feature.

<div *ngFor="let item of sn; let i = index">
  {{i}}
</div>

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

Angular's two-way binding feature allows the use of a variable as a string without directly assigning it to

Sample HTML code: <div tile-component included-svg='::installController.installUpdatesSvg'></div> Install controller: **A scope variable named 'installUpdatesSvg' is defined** this.installUpdateSvg = 'xyzSvg'; ...

Ensure both mouse clicks and pressing the enter key are functional for improved accessibility

Consider the following form with a tabindex property: <form id="settings-form"> <input type="text" /> <input type="submit" /> <a href="#" class="cancel-save" tabindex="0">cancel</a> </form> An action is bou ...

Tips on showing database information with JavaScript

<script type="text/javascript"> var content = { metadata: ['January', 'February', 'March', 'April'], infoSets: [ { fillColor: "rgba(220,220,220,0.2)", strokeCol ...

Leveraging jQuery Ajax and MySQL to generate dynamic HTML content

I'm in the process of creating a unique photo gallery that utilizes dynamic features. Instead of relying on constant HTML/PHP refreshing for updates, I am incorporating jQuery to handle dynamic MYSQL queries. As a beginner, I've managed to creat ...

Shorten Text - React Native

I currently have a React Native application with a FlatList component. The logic I initially implemented was to display an Expand/Collapse arrow whenever the content at the 100th position in the list is not empty. However, I now realize that this approach ...

Discovering descendant div elements

I've been conducting some research, but I'm struggling to find a specific answer for this. Here is the HTML code snippet: <div class="collapsingHeader"> <div class="listItemWrapper"> <div class="itemWrapper"> ...

Error message: The element state is invalid. It must be editable by the user in order to be cleared. This error occurred while attempting to click and input a date on a dropdown

I'm facing an issue while trying to automate the insertion of a date in a calendar using selenium. The error message I received is as follows: invalid element state: Element must be user-editable in order to clear it. Here's the relevant HT ...

Displaying an alert on a webpage that shows a label input using JavaScript and

I'm currently working with HTML5 and JavaScript and I'm facing a challenge. I want to create a feature where users can input any word into a label, and when they click on a button, an alert is triggered with the given text. However, despite my ...

utilizing staggered animations with three.js

I am trying to animate an array of meshes in Three.js, but the properties are not being recognized. tl.staggerFrom(array, 2, {"position.y":-100}) The position.y doesn't change. When I use console.log(array[0].position.y), it gives me the initial val ...

Using Angular to track objects by their unique ID

Upon receiving data from a REST api, I am faced with the following JSON content. [ { "names": { "en": "test123" }, "children": [], "id": "68d87e8c-42f5-4f11-b25a-b30624246c3b", "version": 1, "code": "0", "order": 0, ...

Chrome does not support top.frames functionality

I have three HTML pages: main.html, page1.html, and page2.html. I am displaying page1.html and page2.html within main.html using the code below. <!DOCTYPE html> <html> <frameset frameborder="1" rows="50%, *"> <frame name="f ...

How to check all checkboxes in Angular using ngFor and ngIf?

Is there a way to select all checkboxes in an Angular form that uses ngFor and ngIf? I want to activate all checkboxes for the months when I click on "Select All". The list of months is stored in an array. Click here to see the HTML representation of the ...

Link a PHP variable to a JavaScript variable

Is there a way to set the value of a JavaScript variable using a PHP variable? $(function(){ $("select[name=myselectlist]").change(function(){ var id = $(this).val(); if(id != 0) { $.post("ajax.php", {"id":id}, func ...

ways to display selected custom information with a choiceLabel in a dropdown using primeng

Is there a way to display custom data on a dropdown in Primeng while also showing the selected data as shown in the dropdown list? Please refer to both images below for clarification. <div class="p-grid" *ngIf="deleteUser" style=&quo ...

Rendering HTML content in a preformatted <code> tag using Electron

Recently, a brand new electron/angular application was built with the code snippet running in main.ts: win.loadURL(url.format({ pathname: path.join(__dirname, 'dist/index.html'), protocol: 'file:', slashes: true })); After launc ...

Validating Cognito credentials on the server-side using Node.js

I am currently developing server-side login code for AWS Cognito. My main goal is to verify the existence of a user logging into the identity pool and retrieve the attributes associated with them. With email login, everything is running smoothly using the ...

What is the best way to generate a new DIV every time a button is clicked?

I am attempting to make a square DIV that is red and measures 100x100 pixels. Each time a button is clicked, I want the square to be created. However, the code I have written is not functioning properly: <html> <title> Create New Div ...

Adding a tooltip to an Angular Material stepper step is a great way to provide

I am trying to implement tooltips on hover for each step in a stepper component. However, I have encountered an issue where the matTooltip directive does not seem to work with the mat-step element. <mat-horizontal-stepper #stepper> <mat-step lab ...

Different placeholder text rendered in two text styles

Can an input box placeholder have two different styles? Here's the design I have in mind: https://i.stack.imgur.com/7OH9A.png ...

Customizing Carousel Arrows in Angular with ng-bootstrap

I need help changing the position and icon of control arrows using Bootstrap. I've tried targeting "carousel-control-prev-icon" & "carousel-control-next-icon", but nothing seems to work. Any suggestions on how to properly solve this issue? Here is th ...