why is ngStyle not working

Question

I added the property color in my directive to the ngStyle attribute. but ngStyle is not applying any style to the element. Compiler is not showing any error at all and neither is console. I tried different syntax of ngStyle but it is still not working.

I added the app.modules code below as well. Is there any problem in loading modules.

  import { Directive, ElementRef, OnInit, Renderer2, HostListener, Input } from '@angular/core';
            
            // custom directive which changes background color for odd and even values of index
            @Directive({
              selector: '[appChangecolor]'
            })
            export class ChangecolorDirective implements OnInit {
              @Input() index: any;
                       color: string;
            
              constructor(private elementRef: ElementRef, private render: Renderer2) { }
              // listnes to mouseenter event of the element on which custom directive is applied and calls the function
              @HostListener('mouseenter') bgColor() {
            
                if (this.index % 2 === 0) {
                  // style set through Renderer2 and not by directly accessing DOM element.
                  this.color = 'green';
                } else {
                  this.color = 'red';
                }
                  console.log(this.color);
              }
              // listens to the mouseleave event on the element on which directive is applied
              @HostListener('mouseleave') bgColorRm() {
                this.color = 'black';
                console.log(this.color);
              }
            
              ngOnInit() {
                this.index += 1;
              }
            }



       

 import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { NgStyle } from '@angular/common';
    import {CommonModule} from '@angular/common';
    import { AppComponent } from './app.component';
    // custom directive imported from the respective file
    import { ChangecolorDirective } from './changecolor.directive';
    
    @NgModule({
      declarations: [
        AppComponent,
        ChangecolorDirective // custom directive declared as part of module
      ],
      imports: [
        BrowserModule,
        CommonModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    <!-- table displaying values from objects in users array -->
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Users Details</h3>
          </div>
          <div class="panel-body">
            <section class="container">
              <h2>User Details Table</h2>
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th>Index</th>
                    <!-- looping thorugh array which contains keys of object and display as heading -->
                    <th *ngFor='let key of keys'>{{key}}</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- looping through the users array and displaying values with the index with custom directive applied-->
                  <tr *ngFor='let user of users; index as i' appChangecolor [index]="i" [ngStyle]="{'color': color}">
                    <td>{{i+1}}</td>
                    <td>{{user.firstName}}</td>
                    <td>{{user.lastName}}</td>
                    <td>{{user.email}}</td>
                  </tr>
                </tbody>
              </table>
            </section>
          </div>
        </div>


   

Answer 1

Why do you need a Directive for that, try to do it in the component:

onMouseEnter(index) {
  if (index % 2 === 0) {
    this.color = 'green';
   } else {
    this.color = 'red';
   }
}

onMouseLeave() {
   this.color = 'black';
}

Template

<tr *ngFor='let user of users; index as i' (mouseenter)="onMouseEnter(index)" (mouseleave)="onMouseLeave()" [ngStyle]="{'color': color}">
<td>{{i+1}}</td>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.email}}</td>
</tr>

Then try with Renderer2 & ElementRef

this.render.setStyle(this.elementRef, 'color', this.color);

With ngStyle, I cant test it right now, but I think that you have to have EventEmitter. This is some simple example, just to give a directions ...

@Output colorChanged: EventEmitter = new EventEmitter<string>();

@HostListener('mouseenter') bgColor() {
   ....
    this.colorChanged.emit(this.color);
   ....
}

@HostListener('mouseleave') bgColor() {
   ....
    this.colorChanged.emit(this.color);
   ....
}

<tr *ngFor='let user of users; index as i' appChangecolor [index]="i" [ngStyle]="{'color': color}" (colorChanged)="this.color=$event">

Answer 2

The CSS color property isn't correct used on <tr> or <td> elements. You should add a <p> tag inside each <td> and use the ngStyle on those <p> tags.

Something like:

<tr *ngFor='let user of users; index as i' appChangecolor [index]="i">
  <td><p [ngStyle]="{'color': color}">{{i+1}}</p></td>
  <td><p [ngStyle]="{'color': color}">{{user.firstName}}</p></td>
  <td><p [ngStyle]="{'color': color}">{{user.lastName}}</p></td>
  <td><p [ngStyle]="{'color': color}">{{user.email}}</p></td>
</tr>