Angular 6 Change Styles Using Renderer2 of a different column within ngFor

Question

I have added columns to a table using ngFor. when user clicks on <td> it opens a Dialog box and it return some values. Based on selected values it changes the background-color of that particular <td> using Renderer2 .Based on that returned values I want to change the color of some other <td> as well. Returned values has the item objects of <td> s that I want to make the changes. How can I achieve that?

<td 
   *ngFor="let item of items; index as i"
   (click)="openDialog(someVal)"
    #someVal
>

Component.ts

  openDialog(someVal): void {

      // Some Conditions .................

       this.rd.setStyle(someVar, 'background-color', this.colorCode);
    });
  }

Answer 1

You can use Directive : You can define your own directives to attach behavior to <td> element in the DOM.

<td [dialog]="someVal"
*ngFor="let item of items; index as i"
 >

Class

 import { fromEvent  } from 'rxjs';

 @Directive({
 selector: '[dialog]'
 })
 export class DialogDirective{

 public action: ElementRef ;

  constructor( elementRef: ElementRef<HTMLElement>) {
  this.action = elementRef ;
  }

 @Input() set dialog( someVal : any ) {

 // Some Conditions ...

 // Subscription
 fromEvent(this.action.nativeElement, 'click').pipe(
  .....

 }