Скачать или смотреть How to Dynamically Add a Class in Angular on Click Event

Learn how to dynamically `add a class` to an element when a click event occurs in Angular templates. This guide covers both adding and toggling classes to enhance your UI experience.
---
This video is based on the question https://stackoverflow.com/q/65713087/ asked by the user 'kk-at-cbx' ( https://stackoverflow.com/u/13774019/ ) and on the answer https://stackoverflow.com/a/65713706/ provided by the user 'Moshezauros' ( https://stackoverflow.com/u/3186941/ ) 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 - how to add class when receiving event in template

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 Dynamically Add a Class in Angular on Click Event

When working with Angular, creating a responsive and interactive user interface can greatly enhance the user experience. One common requirement is the ability to add or toggle classes on elements based on user interactions, such as click events. In this guide, we will explore how to achieve this using Angular's capabilities to dynamically manipulate classes based on click events in your template.

The Challenge

Imagine you have a div element that you want to modify when a user clicks on it. A straightforward approach might seem intuitive at first but does not work as expected. For example, you might try to directly manipulate the class list using JavaScript, like this:

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

However, this wouldn't function as anticipated in an Angular environment. The good news is there are better practices to accomplish this task effortlessly.

The Solution

To properly add a class upon clicking an element in Angular, you can utilize Angular's built-in features like ngClass. Below, we will discuss how to implement this effectively in your code.

Step 1: Using ngClass

Instead of trying to manipulate the class directly, we can use Angular's powerful ngClass directive to manage the class applications. Here's how you can do it:

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

In this code:

ngClass is used to bind the class dynamically based on a variable called classStr.

The click event sets classStr to 'my-class' when the div is clicked.

Step 2: Declaring classStr in the Component

To make this work, you need to declare classStr in your component. This is done by adding a simple line in your component's TypeScript file:

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

Step 3: Toggling the Class

The above implementation will add the class only once when clicked. If you want to toggle the class (add it if it’s not there, and remove it if it is), the logic need slight modification. Here’s how you can toggle the class upon click:

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

In this implementation:

The classStr will check its current value. If it’s equal to 'my-class', it sets it to an empty string, effectively removing the class. If it’s not, it assigns 'my-class', adding it instead.

Conclusion

Dynamically adding and toggling classes in Angular templates can greatly enhance the user interface of your application. By following the structured approach outlined above, you can ensure that your classes are modified correctly based on user interactions. Not only does this follow Angular's best practices by leveraging directives like ngClass, but it also keeps your code clean and maintainable.

Whether you’re just starting out with Angular or are looking to refine your skills, mastering dynamic class management will push your projects to the next level. Happy coding!