change color icon when I add movie to favorite in angular

Change Color Icon When Adding Movie to Favorites in Angular

As an Angular developer, you may often come across the need to change the color of an icon when a user adds a movie to their favorites. This can be achieved using various techniques in Angular. In this blog post, we will explore two popular solutions to this problem.

Solution 1: Using ngClass Directive

The ngClass directive in Angular allows us to dynamically add or remove CSS classes based on certain conditions. We can leverage this directive to change the color of the icon when a movie is added to favorites.

First, let’s define a CSS class for the favorite icon with the desired color:

.favorite-icon {
  color: red;
}

Next, in your Angular component, you can define a boolean property to track whether the movie is added to favorites or not. Let’s call this property isFavorite:

isFavorite: boolean = false;

Then, in your HTML template, you can use the ngClass directive to conditionally apply the favorite-icon class based on the isFavorite property:

Finally, you need to implement the toggleFavorite method in your component to toggle the isFavorite property when the user clicks on the icon:

toggleFavorite() {
  this.isFavorite = !this.isFavorite;
}

By clicking on the icon, the isFavorite property will be toggled, and the favorite-icon class will be applied or removed accordingly, changing the color of the icon.

Solution 2: Using ngStyle Directive

Another approach to change the color of the icon is by using the ngStyle directive in Angular. This directive allows us to dynamically apply inline styles to an element based on certain conditions.

First, define a property in your component to store the desired color when the movie is added to favorites. Let’s call this property favoriteColor:

favoriteColor: string = 'red';

Next, in your HTML template, you can use the ngStyle directive to conditionally apply the color style based on the isFavorite property:

Similarly to the previous solution, you need to implement the toggleFavorite method to toggle the isFavorite property when the user clicks on the icon.

By clicking on the icon, the isFavorite property will be toggled, and the color style will be applied or removed accordingly, changing the color of the icon.

These are two popular solutions to change the color of an icon when adding a movie to favorites in Angular. Choose the one that best suits your project requirements and coding style.

Happy coding!