Issues encountered when trying to manipulate the Angular dom

Question

Issues encountered when trying to manipulate the Angular dom

Currently, I have an array of check boxes set up in the following manner:

<div *ngFor="let order of orders; let i = index">
    <input type="checkbox" id="{{orders[i].name}}_i">{{orders[i].name}}
  </div>

Let's say the check boxes are labeled as order1, order2, and so on.

My goal is to be able to change the status of these check boxes (check/unchecked) based on their IDs or through some other method, like this:

document.getElementById("order1").checked = true;

I have attempted this approach, but encountered errors and it did not work as expected.

During my research, I came across a potential solution using @ViewChild. However, this would require me to predefine the IDs, whereas in my case, the ID can vary. Can you suggest an alternative mechanism for achieving this?

javascript angular typescript dom

Answer 1

Answer №1

If you're working within an Angular and TypeScript environment, JavaScript may not be necessary. Utilize Angular's Two-Way binding feature to accomplish your goals efficiently.

Incorporate a checked property into your "order" model and bind this property to the checkbox input using ngModel.

order.ts

export class Order {
  public name: string;
  public checked: boolean;
  ...
}

component.ts

@Component(...)
export class MyComponent {
  public orders: Array<Order>; // Initialize with ngOnInit hook or any other way.
}

component.html

<div *ngFor="let order of orders; let i = index">
    <input type="checkbox" [(ngModel)]="order.checked">{{order.name}}
</div>

Remember, you can access the current object directly through the order variable rather than using orders[i]. For more details, visit Angular's official documentation: https://angular.io/guide/displaying-data#showing-an-array-property-with-ngfor

To update the checked state of your items, simply modify the checked value of any Order object, and it will automatically reflect on your interface:

@Component(...)
export class MyComponent {
  public orders: Array<Order>; 

  public checkFirstOrder(): void {
    this.orders[0].checked = true;
  }
}

Hopefully, this information proves helpful for you.

Answer 2

If you're working within an Angular and TypeScript environment, JavaScript may not be necessary. Utilize Angular's Two-Way binding feature to accomplish your goals efficiently.

Incorporate a checked property into your "order" model and bind this property to the checkbox input using ngModel.

order.ts

export class Order {
  public name: string;
  public checked: boolean;
  ...
}

component.ts

@Component(...)
export class MyComponent {
  public orders: Array<Order>; // Initialize with ngOnInit hook or any other way.
}

component.html

<div *ngFor="let order of orders; let i = index">
    <input type="checkbox" [(ngModel)]="order.checked">{{order.name}}
</div>

Remember, you can access the current object directly through the order variable rather than using orders[i]. For more details, visit Angular's official documentation: https://angular.io/guide/displaying-data#showing-an-array-property-with-ngfor

To update the checked state of your items, simply modify the checked value of any Order object, and it will automatically reflect on your interface:

@Component(...)
export class MyComponent {
  public orders: Array<Order>; 

  public checkFirstOrder(): void {
    this.orders[0].checked = true;
  }
}

Hopefully, this information proves helpful for you.

Issues encountered when trying to manipulate the Angular dom

Answer №1

order.ts

component.ts

component.html

Similar questions

Definition of Jasmine custom matcher type

The value entered for creating a payment method is invalid: the card must be in the form of an object

Cloudflare SSL Error 522 Express: Troubleshooting Tips for Res

Editing the dimensions of the input in Bootstrap 4

What are some strategies for enhancing the efficiency of asynchronous data retrieval and caching?

Utilize Firebase to perform a case-insensitive query

Learn the technique of storing a sequence of functions within a variable using jQuery

Take away the focus from Bootstrap 5 toggle button once it has been clicked

Guide to enabling gzip compression for an Angular 6 application running on asp.net core 2.1 and hosted on Azure App Services

Setting up module aliases in a monorepo initiated with Turborepo: a step-by-step guide

activating a button following the selection of a checkbox

Self-reference within a JavaScript object involves creating a property that points

"Learn the steps to include a success message in an HTTP POST response once a button has been

Steps to have index.html display when running the build command in a Svelte project:

Issues with extensions during the Angular 9 Ivy compilation process

Adjust the iframe height when using slidetoggle

Eliminating data type from union in Typescript

What is the best way to convert the value of "range" to floating point numbers in JavaScript?

Looking to decrease Cumulative Layout Shift (CLS) on the NextJS website for enhanced performance

Save the XML file and input the value (XMLHttpRequest is unable to load the file) - On the Client Side