The ViewEncapsulation.none solution worked for me. With CSS, you have to designate an element to ::ng-deep on, otherwise it breaks with "bad" code.

Thanks for your help!

Hello Chris,

Thank you for following up!

I am glad that you find my suggestion helpful.

After reviewing your second question what I could say is that the two possible scenarios in which custom styling is not being applied is either none of the cells meets the specific condition or the component is using an Emulated ViewEncapsulation. Additionally, in order to force the custom styles down through the current component and its children you should either penetrate this encapsulation using ::ng-deep or set it to None.

Through ViewEncapsulation in .ts file:

@Component({
    selector: 'app-my-component',
    ...
    encapsulation: ViewEncapsulation.None,
})

Through ::ng-deep in .scss/.css file:

::ng-deep {
    .custom-background {
        background-color: #68e684;
    }
}

Please test these approaches on your side and let me know if you need any further assistance.

Looking forward to your reply.

Sincerely,
Riva Ivanova
Entry Level Software Developer

I have updated based on what you showed in the sample, but for some reason I'm not getting any coloring at all in the grid. Maybe you can see what I'm doing wrong?

Grid declaration:

        <igx-grid #compareGrid displayDensity="compact" [data]="parameterData" height="{{height - 133}}px" width="{{width - 440}}px">
            <igx-column *ngFor="let col of columns" [resizable]="true" [field]="col.field" [dataType]="col.type" [formatter]="col.formatter" [pinned]="col.pinned" [width]="col.width" [cellClasses]="stitchClasses"></igx-column>
        </igx-grid>

CSS (not SCSS):

.actualData { background-color: #ffe07a; }

.negativeDiff { color: darkred; }

.positiveDiff { color: darkgreen; }

And the logic for deciding on the colors:

  public stitchClasses = {
    actualData: (
      rowData: any,
      columnKey: string,
      cellValue: any,
      rowIndex: number
    ) => {
      let scenIndex: number = this.scenarioNames.indexOf(rowData.Scenario),
        stitched: boolean =
          scenIndex === 0 ? this.scenario1Stitch : this.scenario2Stitch,
        end: string =
          scenIndex === 0 ? this.scen1StartWw.name : this.scen2StartWw.name;
      console.log(
        `in horizon? ${
          columnKey >= this.actualStartWw.name && columnKey <= end
        }`
      );
      return (
        stitched && columnKey >= this.actualStartWw.name && columnKey <= end
      );
    },
    negativeDiff: (
      rowData: any,
      columnKey: string,
      cellValue: any,
      rowIndex: number
    ) => {
      return rowData.Scenario === 'Diff' && cellValue < 0;
    },
    positiveDiff: (
      rowData: any,
      columnKey: string,
      cellValue: any,
      rowIndex: number
    ) => {
      return rowData.Scenario === 'Diff' && cellValue > 0;
    },
  };

Let me know what you think I'm missing or doing wrong here.

I apologize for the requirements being a bit obfuscated, in terms of what the data will look like. I do greatly appreciate the thoroughness with which you have answered, though, hence the +1 for the post. I am currently investigating the implementation for Grid5 since it seems closest to my use case, which I will attempt to describe a little better below.

In all cases, the only columns that should be colored are the first however many in the horizon, not the scenario/mapping/row total information.

My basic use case is an investigation of a single projection scenario with the actual scenario data prepended into the beginning of a time horizon. The user is able to pick the time period that the data from the projection will start.

For example, consider a projection that is for 2022. The basic use case would generally show Actual data up to the current time frame (week 13 of the year, for example), and for the rest of 2022, it would show the projections. The Actual data (up to week 13) is what would be colored differently to show it is actual production/sales/supply/etc. numbers for each mapping (product linked to the facility it was produced at, is stored, or was shipped from). Each line of the chart would have coloring for the actual data and be the default coloring for projection data, including the totals/avg summary rows at the bottom.

There are more complex situations involving more projections, either some or all will have the Actual data prepended, which will also require the coloring, but the one I want to focus on is a comparison between 2 projections with 1 or both projections prepended by Actual data where projection data will start in different time periods. These 2 scenario comparisons will have a differential row following each product-facility mapping and the totals matrix at the bottom will compare against different facilities and against production vs engineering products.

For the first example, consider the fact that projections are released weekly with changes based on the production from the previous week. A user is likely to compare the current week's projection (13) against a mass projection (all products for next 3-5 years) made at the beginning of the year. The weekly scenario will be prepended by the Actual data (because it will start the week after the last released Actual data period). We will want the Actual data colored for comparison against the mass projection, but not any of the differential or totals matrix data.

The differential rows should have highlighting of red, if negative, or green, if positive, to quickly show users whether we are beating or dragging on an expectation.

As stated, it seems like your examples have covered these needs. I will work on it and let you know if I find a deficiency.

Again, thank you so much for the quick and thorough response.