Stay Tuned!

Subscribe to our newsletter to get our newest articles instantly!

Angular CSS

How to add CSS class on click in Angular

In Angular applications, dynamically adding CSS classes on user interaction, such as a click event, offers a way to enhance visual feedback and interactivity. This functionality allows for seamless changes in styling based on user actions. Let’s explore how to implement this feature within an Angular application.

Implementing Dynamic CSS Class Addition on Click

1. Component Template Setup

Set up the HTML template with an element that responds to a click event and applies a CSS class dynamically:

<!-- Example component template -->
<div []="isActive" (click)="toggleActive()">
  Click me to toggle the 'active' class!

2. Component Logic

Define the corresponding logic within the component TypeScript file to handle the click event and manage the CSS class dynamically:

import { Component } from '@angular/core';

  selector: 'app-clickable-element',
  templateUrl: './clickable-element.component.html',
  styleUrls: ['./clickable-element.component.css']
export class ClickableElementComponent {
  isActive: boolean = false;

  toggleActive() {
    this.isActive = !this.isActive;

3. Applying CSS Styles

Define the styles in the component’s CSS file to apply when the class is active:

/* Example CSS class */
.active {
  /* Define styles for the 'active' state */
  /* Example: background-color: yellow; */


In Angular, dynamically adding CSS classes on click events allows developers to create interactive elements with altered styles based on user interactions. By leveraging Angular’s binding syntax and component logic, developers can seamlessly toggle CSS classes, altering the appearance and behavior of elements to provide visual feedback to users.

Incorporate these steps into your Angular applications to add interactive styling dynamically on click events, creating engaging and responsive user interfaces. This feature enhances user experience by providing visual cues and interactive elements that respond dynamically to user actions.

You Might Also Like

  • Lorem ipsum dolarorit ametion consectetur
  • The Blues Kitchen woks Podcast
  • Chasing Dreams in Slow Motion
  • If you use this site regularly and would like to help keep the site on the Internet,
  • Dolarorit ametion consectetur elit.
  • Modern Office Must-Have in 2021
  • If you are going to use a passage of Lorem
  • Lorem ipsum consectetur elit.


About Author

Leave a comment

Your email address will not be published. Required fields are marked *

You may also like


How to format date in Angular 12

In Angular 12 applications, formatting dates is a common requirement for presenting dates in various formats within the user interface.

Mastering Text Alignment: How to Justify Text with CSS

Text justification in CSS is a styling technique used to create clean and organized text layouts, enhancing readability and aesthetics.