Add CSS property in Angualr2 with MetaWidget

Question

I am trying to add CSS when clicked on row or column of table, Following is code

private rowClicked(event: Event): void {
   event.srcElement.setAttribute("class", "highlighted");
}

But it's not working as accepted. Am I doing in wrong way, Is there any alternate way to add CSS dynamically?

Note-

Is there any way to add CSS using dom element, my table has thousands of data and to create this table, I have used MetaWidget.

Answer 1

The easiest way to your problem is to assign a unique ID to each included element together with employing another variable to hold selected ID. The logic to turn on my-class CSS class will now be based on the selected ID.

Your new HTML template:

<div (click)="rowClicked(1);" [ngClass]="{'my-class': highlightedDiv === 1}">
  > I'm a div that gets styled on click
</div>

Your rowClicked function:

highlightedDiv: number;

rowClicked(newValue: number) {
  if (this.highlightedDiv === newValue) {
    this.highlightedDiv = 0;
  }
  else {
    this.highlightedDiv = newValue;
  }
}

A working demo is here.

More can be found here.

---

You are using MetaWidget, but you are not mentioning what version you are using.

If you want work with Angular2 and MetaWidget, you should have use a compatible version of MetaWidget, which can be found here-

https://github.com/AmitsBizruntime/MetawidetA2

Using this library will be the best solution for you.

Re-

Angular does not work based on DOM, it works based on Component. If you like to work on DOM, then you should include jQuery in tour angular project from here-

How to use jQuery with Angular2?

But it is not a good practice.