How to remove ViewEncapsulation.None after the component destroyed

Question

I try to use ViewEncapsulation.None to insert background color to the kendo-grid-column as I found here, but my local CSS become the global, so it effect to other component. please tell me how to set it local only or remove it after the component destroyed.

This is my code:

xxx.component.ts

...
@Component({
  selector: 'app-gnb6100',
  templateUrl: './xxx.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./xxx.component.css']
})
...
rowCallback(context: RowClassArgs){
  if (context.dataItem.serviceStatusDesc === 'Deactivated'){
    return { deactivated: true };
  } else {
    return {};
  }
}
...

xxx.component.html

...
<kendo-grid  
    scrollable="virtual"
    [data]="data"
    [sortable]="true"
    [sort]="sort"
    [rowClass]="rowCallback"
    [resizable]="true"
    [reorderable]="true"
>
    <kendo-grid-column width="100" class="cen" field="userID" title="ID" ></kendo-grid-column>
    <kendo-grid-column width="100" field="userName" title="Username"></kendo-grid-column>
</kendo-grid>
...

xxx.component.css

...
.k-grid tr.deactivated{ background-color: #e5e5e5;}
...

And sorry for my poor English.

You could give your grid an id, so instead of `k-grid tr.deactivated` you use `#gridId k-grid tr.deactivated` This would only affect other grids if they had the same id — , Nov 24 '20 at 10:57
if only want to change the background-color of kendo, you can move the .css about kendo to your "styles.css" file (the file you has defined in the "styles" tag in your angular.json) and not use ViewEncapsulation.None in your component — Eliseo, Nov 24 '20 at 11:23

Shashan Sooriyahetti · Accepted Answer · 2020-11-25T03:25:04.070

4

Hi if you only need to set the background-color do not set view encapsulation to none!

you can use

:host ::ng-deep .k-grid tr.deactivated{
  background-color: #eef;
}

The following example applies a background-color style to relevant elements that has the CSS class .k-grid tr.deactivated globally.

For the angular concept follow component styles - component-styles

edited Nov 25 '20 at 03:25

answered Nov 24 '20 at 10:28

Shashan Sooriyahetti

828
9
21

By using **:host ::mg-deep .k-gird tr.deactivate { background-color: #e5e5e5 }**, now my project worked, Thank you for your help. – Traly Nov 25 '20 at 01:13
@Traly it would be nice if you can mark my answer as correct one and upvote it so others can know that it is the right answer :) – Shashan Sooriyahetti Nov 25 '20 at 03:21
1

I want to vote your answer up, but I cannot, because I have not enough reputation. – Traly Nov 25 '20 at 06:17
@Traly it is fine now someone might find it helpfull – Shashan Sooriyahetti Nov 25 '20 at 07:24
I cannot get this to work when I want to set the entire background page to a background color. If I use encapsulation: ViewEncapsulation.none it does work BUT I am stuck with it when I navigate to other components. Was hoping to 'reset' ViewEncapsulation on the ngOnDestroy() method but it did not work. – Brian Reinhold May 04 '23 at 12:08
@BrianReinhold I don't think you can reset ViewEncapsulation, When you set ViewEncapsulation.none the style added as a global CSS then it is stuck with other components as well. ::ng-deep should work, check the elements after finished rendering the components, might be there are few elements unknown. Optional trick - you can define a custom class for the component and style the class inside the global CSS , this way you don't have to use neither ng-deep nor ViewEncapsulation.None – Shashan Sooriyahetti May 04 '23 at 12:20
@ShashanSooriyahetti I am trying to set the full page which I can't do using the component css file - there is stuff in the index.html and/or app.component.html that I dont have access to. – Brian Reinhold May 04 '23 at 20:25
@BrianReinhold don't you have access to the global style.scss? if so create a class with respective background color and try adding that class using the component? – Shashan Sooriyahetti May 05 '23 at 12:30
@ShashanSooriyahetti that's going to take some thinking on my side. I do have access to the global css. But I'm still too much of a newbie in Angular to do that off the top of my head. But it will give me something to chase! – Brian Reinhold May 06 '23 at 13:24
maybe you can create a new stackflow question with example on what you want to achieve and tag me there :) – Shashan Sooriyahetti May 07 '23 at 19:35
@ShashanSooriyahetti thought I could do it by using a
over the entire page. But it only works in the app.component case. If I use a element over the whole page it works. Just need to globally set the 'body' margins to 0.
– Brian Reinhold May 08 '23 at 09:05

How to remove ViewEncapsulation.None after the component destroyed

1 Answers1