From transitioning from AngularJS to the latest version Angular 8

I have an Angular application where I need to update some old AngularJS code to work with Angular

table.html

<table ngFor="let group of vm.groups" style="float: left">
      <thead>
        <tr>
          <th><b>Sl. No</b></th>
          <th><b>Generated Code</b></th>
        </tr>
      </thead>
      <tr *ngFor="let g of group.values">
        <td [ngStyle]="$odd ? {'background': 'lightgrey' } : {'background': 'white' }">{{$parent.$index * 10 + $index + 1}}</td>
        <td [ngStyle]="$odd ? {'background': 'lightgrey' } : {'background': 'white' }">{{g.value}}</td>
      </tr>

    </table>

table.ts

 app.controller('Ctrl', function() {
      var vm = this;

      var items = [{value: 'bbb'},{value: 'bbb'},{value: 'bbb'},{value: 'bbb'},{value: 'bbb'}];
      vm.groups = [];
      var i,j,temparray,chunk = 10;
      for (i=0,j=items.length; i<j; i+=chunk) {
        temparray = items.slice(i,i+chunk);
        vm.groups.push({values: temparray});
      }
    });

I am looking to convert this code to Angular 2 or higher. Any guidance would be appreciated as I am new to Angular.

Answer №1

When working with Angular 2 and newer versions, it is recommended to utilize the *ngFor directive for looping through arrays.

Therefore, your component.html file should have a structure similar to this:

<table *ngFor="let group of groups; let i=index">
    <thead>
        <tr>
            <th><b>Sl. No</b></th>
            <th><b>Generated Code</b></th>
        </tr>
    </thead>
    <tr *ngFor="let g of group.values; let x=index" [ngClass]="(x%2===0)?'even':'odd'">
        <td>{{i * 10 + x +  1}}</td>
        <td>{{g.value}}</td>
    </tr>

</table>

If you are looking for an example using Angular 8, you can check out this demo.

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

JsPlumb: Incorrect endpoint drawn if the source `div` is a child of a `div` with `position:absolute`

My current setup involves two blue div elements connected by jsPlumb. You can view the setup here: https://jsfiddle.net/b6phv6dk/1/ The source div is nested within a third black div that is positioned 100px from the top using position: absolute;. It appe ...

Creating JPEG images with specified dimensions. How can you add W x H sizing to an image?

I have been searching for a Deno/TypeScript code snippet that can create basic images with dimensions embedded on them. I have provided an example of the code below, which generates images in JPEG format, base64, and dataURL. The code works by adding RGB ...

Converting Variable Values to Element IDs in JavaScript: A Helpful Guide

Is it possible to declare a value in variable A and then access that value as an id in variable B using the method getElementById()? var A = 10; var B = document.getElementById(A); console.log(B); ...

Is it possible to set a different default page index other than 0 in a material table using reactjs?

I have noticed that the default page index in the material table is set to '0', but the API I am currently using begins with a page index of '1'. Is there a way to adjust the default page index of the table to match that of the API? ...

The error "ReferenceError: process is not defined in vue 3" is being

<script setup> import puppeteer from 'puppeteer'; const onChange = async () => { // Initializing the puppeteer library const browser = await puppeteer.launch(); // Creating a new page const page = await browser.newPage(); / ...

Make TextField with type number forcibly show dot as decimal separator

I am currently utilizing the material-ui library to display a TextField component in my react application. Strangely, all instances of <TextField type="number /> are displaying decimal separators as commas (,) instead of dots (.), causing confusion f ...

Dynamic importing fails to locate file without .js extension

I created a small TS app recently. Inside the project, there is a file named en.js with the following content: export default { name: "test" } However, when I attempt to import it, the import does not work as expected: await import("./e ...

Ways to resolve the issue of undefined $route.current in AngularJS

I have recently started using AngularJS and I am encountering an error "TypeError: $route.current is undefined". Please refer to the code snippet below: var sampleApp = angular.module('sampleApp', ['ngRoute']); sampleApp.config([&ap ...

What could be causing my image not to show up on ReactJS?

I'm new to ReactJS and I am trying to display a simple image on my practice web app, but it's not showing up. I thought my code was correct, but apparently not. Below is the content of my index.html file: <!DOCTYPE html> <html> & ...

Checking JavaScript files with TSLint

After spending many hours attempting to make this work, I still haven't had any success... I am wondering: How can I utilize TSLint for a .js file? The reason behind this is my effort to create the best possible IDE for developing numerous JavaScrip ...

Exploring the Haversine Formula and Geolocation Integration in AngularJS

I am currently developing an application that will organize locations based on either name or distance from the user. Everything is functioning properly except for retrieving the distance. I believe I should be able to obtain the user's coordinates th ...

Preserving scroll position during page navigation in Next.js

Currently, I am working on a website using the Next.js boilerplate. Here is the routing code that I am using: import Link from 'next/link' <Link href={{ pathname: '/some-url', query: { param: something } }}> <div> ...

Invoke the do_action function with JavaScript/jQuery

After successfully logging in through Facebook, my AJAX function sends information to the userpro_ajax_url. In order to run a do_action function within the success block, I am trying the following: <?php ob_start(); do_action('userpro_social_l ...

Struggling with adding headers in React application

When I try to include an h1 heading, either the heading doesn't show up if I comment out the buttons, or if I comment out the heading, then the buttons don't display. But when both are included, nothing is displayed. Any suggestions on how to fix ...

Is it possible to use Date as a key in a Typescript Map?

Within my application, I have a requirement for mapping objects according to specific dates. Given that typescript provides both the Map and Date objects, I initially assumed this task would be straightforward. let map: Map<Date, MyObject> = new M ...

AngularJS Alert Timer Setting

Is there a way to display the timer value in AngularJS? I have included the following code for the timer tag: <timer interval="1000" countdown="100">{{countdown}}</timer> I have also added an alert function in the script.js file to display th ...

React Native component that enables users to both input their own text and select options from a dropdown menu as they type

Looking to develop a component that combines Text Input and FlatList to capture user input from both manual entry and a dropdown list. Has anyone successfully created a similar setup? I'm facing challenges in making it happen. Here's the scenari ...

How to use getBoundingClientRect in React Odometer with React Visibility Sensor?

I need help troubleshooting an error I'm encountering while trying to implement react-odometer js with react-visibility-sensor in next js. Can anyone provide guidance on how to resolve this issue? Here is the code snippet causing the problem: https:/ ...

Angular 8: Issue encountered while resolving parameters for TextAreaEditorComponent

After upgrading angular to version 8.2.14, I attempted to convert the below code from a class to a component. However, I encountered the following error: ERROR in Can't resolve all parameters for TextAreaEditorComponent The issue seems to be with th ...

Arrange the div and ensure that the external JavaScript file functions properly when the page loads

I am encountering an issue with my JavaScript and CSS code. It works perfectly fine within the fiddle environment but fails to function properly outside of it. Here is the link to the fiddle When I embed the code into an HTML document directly, it does n ...