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

Encountering a Component Exception error in React Native while attempting to implement a Victory chart component

What is the process for passing an object in the http.send() method?

What is the proper way to utilize a class with conditional export within the Angular app.module?

JavaScript: Receiving an error that function is undefined when working with data binding

Seeking particular section of online content in an asynchronous manner

The Correct Way to Implement Return in jQuery Ajax

transferring data from JavaScript to PHP variables

Restrict the number of rows in a CSS grid

What sets the do/tap operator apart from other observable operators?

The map component does not render when the agm-map is placed within the component

Unit Testing in Vue.JS: The original function remains active even after using sinon.stub()

Using TypeScript to filter and compare two arrays based on a specific condition

serving files using express.static

The display of the selected input is not appearing when the map function is utilized

Challenges with loading times in extensive AngularJS applications

Determining the Similarity of jQuery Selectors' Selected Elements

Alter the style type of a Next.js element dynamically

Implement the anti-flickering script for Google Optimize in a NextJS/ReactJS environment

Removing an event from Fullcalendar

Highcharts real-time data not refreshing following modification of PHP variable