The Angular material slider experiences issues with functionality when paired with the *ngFor directive

Having a unique problem that I could easily replicate on stackblitz.

When using multiple mat sliders generated from a *ngFor loop with numbers as values, encountering an issue where moving the first slider affects all others. Subsequent drags only update the first slider and restrict movement after initial drag.

Puzzled by this unexpected behavior, manual rendering of matsliders works fine but dynamically rendering them with *ngFor is necessary for my current project.

Link to StackBlitz

Any assistance would be greatly appreciated. Working with Google Chrome, Angular 11, and Angular Material 11.2.12

Edit: Trying to change values using the "s" local variable results in error "Cannot use variable 's' as the left-hand side of an assignment expression. Template variables are read-only.". This does not occur on stackblitz, unsure why.

angulartypescriptangular-materialfrontendmaterial-design

Answer №1

It appears that using let i = index and index[i] when you already have s is causing confusion. I'm not entirely certain of the reason behind this issue, but it seems to be resolved with the following adjustment:

<div *ngFor="let s of list; let i = index">
  <mat-slider [(ngModel)]="list[i]"> </mat-slider>
  {{ s }}
</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

Arranging Typescript strings in sequential date format

Looking for guidance on how to sort string dates in chronological order, any expert tips? Let's say we have an array object like: data = [ {id: "1", date: "18.08.2018"} {id: "2", date: "05.01.2014"} {id: "3", date: "01.01.2014"} {id: ...

javascripttypescript

Issue with Ionic Map and location services

After extensively searching for solutions to my current error, I have found that all existing solutions are outdated and do not work for me. The issue began when I tried to incorporate the user's current location into my app, which utilizes Google Map ...

angulargoogle-mapsgeolocationionic4capacitor

Removing a Request with specified parameters in MongoDB using NodeJS

Working with Angular 4 and MongoDB, I encountered an issue while attempting to send a delete request. My goal was to delete multiple items based on their IDs using the following setup: deleteData(id) { return this.http.delete(this.api, id) } In order ...

javascriptnode.jsangularmongodbexpress

Having trouble customizing the HTML range input?

I am looking to customize the appearance of a range input slider. Specifically, I want the slider to be green for the lower portion (where the thumb has moved) and grey for the remaining section. I have successfully changed the default styles from blue and ...

javascripthtmlcssangularrange

Error: The Angular2 Router is unable to locate the XOutlet outlet in order to load the YComponent

I've encountered an issue while using named router outlets in Angular2 version 2.1.2. The error message I'm receiving is: Cannot find the outlet XOutlet to load 'YComponent' Although the error message is clear, I'm struggling ...

angularangular2-routing

Combining URL parameters into an object with NestJS's HTTP module

Is there a method for passing URL parameters to the httpService in nestjs? I want to improve the readability of this URL without resorting to Axios as nest has its own HTTPModule. Currently, this is how it looks and functions: const response = await this. ...

typescriptnestjsurl-parametershttpmodule

Unable to establish a cookie on an Angular client hosted anywhere except for 'localhost'

Utilizing an express server as the backend and an angular client as the frontend. The express server is hosted on port 3001, while angular is on port 4200. Everything works perfectly when running on localhost. However, when attempting to host Angular on a ...

angularexpresscookies

Is there a way to identify legitimate contacts and phone numbers within an Android application using Javascript or Typescript?

I am developing an Android app where I need to show a list of contacts and specify if they are part of the app's network. However, my goal is to only display valid contacts while excluding unwanted ones such as toll-free numbers or data balance check ...

androidangulartypescriptphone-number

What methods can I use to create fresh metadata for a search inquiry?

On my search page, I am using a search API from OpenAI. My goal is to modify the meta description of the page to display 'Search | %s', with %s representing the decoded search query. However, due to limitations in Nextjs 13, the useSearchParams f ...

reactjstypescriptnext.js13

What issue are we encountering with those `if` statements?

I am facing an issue with my Angular component code. Here is the code snippet: i=18; onScrollDown(evt:any) { setTimeout(()=>{ console.log(this.i) this.api.getApi().subscribe(({tool,beuty}) => { if (evt.index == ...

angulartypescript

Enhance the Component Props definition of TypeScript 2.5.2 by creating a separate definition file for it

I recently downloaded a NPM package known as react-bootstrap-table along with its type definitions. Here is the link to react-bootstrap-table on NPM And here is the link to the type definitions However, I encountered an issue where the types are outdate ...

reactjstypescripttypescript2.0react-bootstrap-table

Currently in motion post file selection

I am currently facing an issue with a button that triggers a file selector pop-up. Below is the code snippet: <button mat-raised-button (click)="inputFile.click()">Choose a file</button> <input #inputFile type="file" [style.display]="' ...

javascripthtmlangularfile-upload

Perform an action after the Ngx Bootstrap modal has been hidden

My modal features a login button: <button type="button" (click)="save()" class="btn btn-primary"> login </button> Upon clicking the button, my desired outcome is to: first hide the modal, and second navigate to another route. However, ...

angulartypescriptmodal-dialogngx-bootstrap

Making sure the checkbox stays selected in an angular environment

After experimenting with Angular 9 and a custom input, I achieved the following result => https://stackblitz.com/edit/angular-ivy-rgsatp My goal was to prevent users from disabling a radio button that is currently checked. Therefore, I made changes in ...

javascripthtmlangular

Dynamic Angular API request

Attempting to retrieve data from multiple APIs obtained from an initial API call. loadData() { this.http.get(this.firstApi).pipe( .map(response => response.ip) ) .subscribe(ip => { console.log(ip); Observable.for ...

angularangular6rxjs6

Angular 6 provides a regular expression that specifically targets the removal of any characters that are not numbers and enforces the allowance of

I have tried various solutions to restrict input in an Angular material input box, but none seem to be effective for my specific case. I need the input field to only allow numbers and a decimal point. Any other characters should be automatically removed as ...

javascripthtmlangulartypescriptangular-material

Guide to aligning a component in the middle of the screen - Angular

As I delve into my project using Angular, I find myself unsure about the best approach to rendering a component within the main component. Check out the repository: https://github.com/jrsbaum/crud-angular See the demo here: Login credentials: Email: [e ...

javascriptangulartypescriptng-templateangular2-ngcontent

Asynchronously parsing CSV files in NodeJs using the `await` keyword within the `on('data')`

I have a specific code snippet that is designed to read lines from a .csv file one by one and then store each processed row into a database const csv = require('csv-parse') const errors = [] csv.parse(content, {}) .on('data', async ...

javascriptnode.jstypescriptcsvnode-csv-parse

Angular 10 does not fulfill promises as expected

In the Angular 10 project I'm working on, I encountered an issue while trying to call an API request asynchronously using promises. The code I wrote didn't seem to execute the API call as expected and kept exiting at the first line without progre ...

javascriptangulartypescriptpromise

What is the best way to structure YAML information in Angular version 14?

I am developing an Angular 14 Application where I have received YAML data in the API Response. I want to display it on my frontend, but the pre tag only shows plain text without any formatting, color, or line numbers similar to other websites I've see ...

node.jsangularnpmyaml