Скачать или смотреть How to Change the Attribute Value of an Element in Angular 9

Learn how to change an HTML element's attribute value dynamically within your Angular 9 application using best practices.
---
This video is based on the question https://stackoverflow.com/q/64034961/ asked by the user 'Subham' ( https://stackoverflow.com/u/6550398/ ) and on the answer https://stackoverflow.com/a/64035097/ provided by the user 'A.khalifa' ( https://stackoverflow.com/u/5308487/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Angular 9 change the attribute value of an element

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Change the Attribute Value of an Element in Angular 9

Changing the attribute value of an HTML element dynamically is a common requirement in Angular applications. This guide will dive into a common problem developers face when attempting to modify an element attribute using TypeScript and Angular practices. We will provide a clear solution that adheres to Angular’s best standards.

The Problem

Imagine you have the following HTML element in your Angular component:

[[See Video to Reveal this Text or Code Snippet]]

You want to change the name attribute from "hai" to "hello" when a user clicks the <div>. Initially, you may attempt to leverage the getAttribute and setAttribute methods like this in your TypeScript file:

[[See Video to Reveal this Text or Code Snippet]]

However, you notice that while you can retrieve the existing value correctly, the new value does not reflect in the DOM. This happens because Angular does not automatically reflect direct DOM manipulations. So, how can you effectively set this attribute in a way that updates your view?

The Solution

The best way to change the attribute of an element in Angular is using ElementRef along with the @ ViewChild decorator. Here are the steps you should follow:

Step 1: Import ElementRef and ViewChild

Ensure you import the necessary Angular core modules in your component file:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Set up the @ ViewChild decorator

Use @ ViewChild to access the DOM element directly. Modify your component class as follows:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Update the test function

Next, simplify your test function to access the element reference correctly and set the new value. Here's how to do it:

[[See Video to Reveal this Text or Code Snippet]]

Step 4: Remove unnecessary parameters

Notice that you do not need to pass $event as a parameter into your function anymore since you can directly access the element using this.myCkechName.

Wrapping Up

By following these steps, you can seamlessly change the attribute value of an element in Angular 9 using best practices. Using the @ ViewChild decorator alongside ElementRef not only improves readability but also ensures that your manipulation is in line with Angular's reactive model.

Key Takeaway

Always prefer using Angular's rendering and update mechanisms (ElementRef with @ ViewChild) over direct DOM manipulations. This allows Angular to properly manage changes and updates in your application, adhering to its reactive programming principles.

Feel free to try it out and see how easily you can manage element attributes in your Angular applications! Happy coding!