Is there a way to modify the style within a TS-File?

Question

Is there a way to modify the style within a TS-File?

I've created a service to define different colors and now I want to set separate backgrounds for my columns. However, using the <th> tag doesn't work because both columns immediately get the same color.

Here's my code:

color-variation-service

export class ColorVariationService {

  public defaultStyles = {
    firstBackgroundColor: '#25a1b1',
    secondBackgroundColor: '#c3c0c0',
  };

  sharedStyleSource = new ReplaySubject<any>(1);
  public sharedStyle = this.sharedStyleSource.asObservable();

  constructor() { }

  newStyle(obj: any) {
    this.defaultStyles[obj.name] = obj.value;
    console.log('defaultStyles:', this.defaultStyles);
    this.sharedStyleSource.next(obj);
  }
}

my-component

public myArray = [
    { attribute: 'firstColumn', name: 'Firstname'},
    { attribute: 'secondColumn', name: 'Lastname'},
  ];

ngAfterViewInit() {
    changeFirst('firstColumn');
    changeSecond('secondColumn');
  }

public changeFirst(attributeToChange: any) {
    const displayedColumn = this.displayedColumns.find((dc) => dc.attribute === attributeToChange);
    if (displayedColumn && displayedColumn !== null) {
      displayedColumn.attribute = this.colorVariationService.defaultStyles.firstBackgroundColor;
    }
  }

public changeSecond(attributeToChange: any) {
    const displayedColumn = this.displayedColumns.find((dc) => dc.attribute === attributeToChange);
    if (displayedColumn && displayedColumn !== null) {
      displayedColumn.attribute = this.colorVariationService.defaultStyles.secondBackgroundColor;
    }
  }

This approach doesn't seem to be working as expected. Can you suggest a solution to this issue?

javascript angular typescript mat-table

Answer 1

Answer №1

My solution doesn't involve using your service.

I've created a method called changeColor() which takes a parameter. This parameter is the index of the tables-output (in my example, the index from the alphabet array). The changeColor() method checks against the index to determine if it's even (return color-one) or odd (return color-two) in order to alternate colors each time.

The color can be specified in the .ts file.

public changeColor(index: number): string {
  if (index % 2 == 0 ) { // if is even
    return "#25a1b1"; // first color
  } else if (index % 2 == 1 ) { // if is odd
    return "#c3c0c0"; // second color
  } 
}

In the HTML file, I set the background-color as follows and use the changeColor() method to choose one of the two colors:

<tr *ngFor="let element of alphabet; index as i">
    <td style="background-color:{{ changeColor(i) }};"> {{ element.name }} </td>
</tr>

You can view the implementation on my stackblitz

Answer 2

My solution doesn't involve using your service.

I've created a method called changeColor() which takes a parameter. This parameter is the index of the tables-output (in my example, the index from the alphabet array). The changeColor() method checks against the index to determine if it's even (return color-one) or odd (return color-two) in order to alternate colors each time.

The color can be specified in the .ts file.

public changeColor(index: number): string {
  if (index % 2 == 0 ) { // if is even
    return "#25a1b1"; // first color
  } else if (index % 2 == 1 ) { // if is odd
    return "#c3c0c0"; // second color
  } 
}

In the HTML file, I set the background-color as follows and use the changeColor() method to choose one of the two colors:

<tr *ngFor="let element of alphabet; index as i">
    <td style="background-color:{{ changeColor(i) }};"> {{ element.name }} </td>
</tr>

You can view the implementation on my stackblitz

Is there a way to modify the style within a TS-File?

Answer №1

Similar questions

Unlocking new perspectives with a click

PHP and Ajax Form Submission Directing to Backend PHP Script

Having trouble with Javascript/jQuery not functioning in IE8?

Using Angular Project: Exploring the Feasibility of Accessing SCSS Files from Node_modules in Custom Components

Encountered an HttpErrorResponse while trying to access the API endpoint

Having trouble retrieving a value from a reference object in React Typescript?

When working with Typescript and React, you may encounter an issue where an element implicitly has an 'any' type because the type 'State' has no index signature. This can lead to

Controller Function Utilizing Private Variable in AngularJS

What is the best way to integrate an asynchronously initialized API with a Vuex state?

Possible solutions for AngularJS using ng- tags

Is there a way to efficiently convert several strings within an object that has been retrieved from an HTTP request into another language, and subsequently save this object with the

Custom Angular directive for collapsing sub menus with CSS

Set the minimum height of a section in jQuery to be equal to the height of

Looking to expand the width of the sub menu to reach the full width of the

"Cookie Magic: Unleashing the Power of Ajax and

Tips for clearing out text in a <p> tag with javascript when it exceeds a specific length of 100 characters

Submitting an Ajax form refreshes the page

What is the best way to organize React components/modules in order to effectively separate the UI?

Setting up an Express route for updating data

Div sliding out of view