I am currently working on an angular project to create a sorting visualizer. My goal is to generate a visual representation of an array consisting of random numbers displayed as bars using divisions. Each bar's width will correspond to the value of the array at that specific index. For instance, if arr[0]=70, then the width of div id='bar0' should be 70%. This visualization will be triggered when I click on the "generate an array" button, followed by clicking the "sort" button to sort the entire array.
However, despite my efforts, I keep encountering errors in the developer console. Below is a snippet of my code from app.component.ts:
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
str: string = "";
// other variables and functions here
}
And here is the corresponding code from app.component.html:
<div class="nav">
<a href="#">Home</a>
<a href="#">Open Visualizer</a>
<a href="#">Technologies Used</a>
<a href="#">About</a>
</div>
<section>
<button (click)="generateArray()">Generate Array</button>
<button (click)="sortt()">Sort</button>
<div class="bar" *ngFor="let items of arr; let i=index;" [id]="'bar'+i"></div>
</section>
<router-outlet></router-outlet>
I seem to be missing something crucial here. Can you help me figure out what might be causing these errors?