Question 256927 in Html Question posted in
Some basic documentation can be found here.

Html – dinamically change style of a div in angular

i want to change the color of an element inside my angular app by using dynamic class,
here is my code , its works but not as expected, i have to reload the page before the color of my element change . there is my code .
i hope you can help me
thanks you in advance

<div class="w-full h-10 flex items-center px-4 cursor-pointer hover:bg-gray-200" [class]="file.id == id.id ? 'bg-blue-100' : '' " (click)="navigate(file.id)">
                        {{ file.id }} 
                    </div>
Tags:

2

Answers


  1. 0

    you can inject ChangeDetectorRef and force angular to check for changes

    constructor(private cdRef: ChangeDetectorRef) { }

    in your function

    this.cdRef.detectChanges();
    Login or Signup to reply.
  2. 0

    You might want to look into the use of ngClass – e.g.

      <p>Passing a configuration object:</p>
  <button [ngClass]="{ btn:true, 'btn-primary':true }">
    Button
  </button>

    Example is from here: https://blog.angular-university.io/angular-ngclass-ngstyle/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search