Control CSS variable from Angular 5

Question

Is there any way to control a CSS variable defined at a component's root level using Angular methods? In JavaScript, we have document.documentElement.style.setProperty() when we set at root level.

In angular, can we use ':host' to declare css variable for global access within component? or do we need to use something like '::ng-deep :root'?

The following question also remains unanswered: Angular: Use Renderer 2 to Add CSS Variable

score 34 · Accepted Answer · edited Apr 18 '18 at 19:32

34

Yes you can set variables in root scope:

:root {
  --main-color: red
}

Yes you can use :host selector to target element in which the component is hosted.

:host {
  display: block;
  border: 1px solid black;
}

You can also use, :host-context to target any ancestor of the component. The :host-context() selector looks for a CSS class in any ancestor of the component host element, up to the document root.

:host-context(.theme-light) h2 {
  background-color: #eef;
}

Note: ::ng-deep or /deep/ or >>> has been deprecated.

Read more about it here: special css selectors in angular

Just an additional information. It works both inside ':root' as well as ':host' We can set values to them by:

constructor(private elementRef: ElementRef) { } then this.elementRef.nativeElement.style.setProperty('--color', 'red');

edited Apr 18 '18 at 19:32

Srikanth Sharma

1,509
2
15
27

answered Apr 18 '18 at 15:33

ashfaq.p

5,379
21
35

1

is it possible to set values for CSS variables also in host or host-context and access them in *.ts file? bcz my intention is to know CSS variable access, specifically. – Srikanth Sharma Apr 18 '18 at 17:04
ok. will try it out and get back on this. thanks a lot for the update. – Srikanth Sharma Apr 18 '18 at 17:18
@ashfaq.p, you are a life saver! – Artanis Zeratul May 28 '19 at 02:52

Asaf Agranat · Answer 2 · 2019-07-25T22:10:35.660

The most constructive and modular way to use css vars in components (with viewEncapsulation) is as such:

// global css
:root {
   --main-color: red
   --alt-color: blue
}

// inside component component css
::ng-deep :root {
   --specific-css-var: var(--main-color)
}
:host {
   background-color: var(--specific-css-var)
}
:host(.conditional-class) {
   --specific-css-var: var(--alt-color)
}

NOTE: despite ::ng-deep being deprecated, it hasn't been replaced yet (and has no replacement), as can be read in several discussion like this

score -4 · Answer 3 · answered Apr 18 '18 at 16:00

-4

Best thing for each component like a background color with out using ::ng-deep (which sets bg for all children)

import the following

import {ElementRef} from '@angular/core';

declare elementref in constructor

 constructor(private elementRef: ElementRef) {}

then call the function ngAfterViewInit()

ngAfterViewInit(){
    this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = ' white';
}

this sets bg to white but you can replace it with a hex color as well, so you can do that with every component

answered Apr 18 '18 at 16:00

Alexis Poo

82
7

i didnt plan to touch the DOM. I wanted to animate CSS property of multiple DOM by controlling single CSS variable. any possibility in that direction? – Srikanth Sharma Apr 18 '18 at 17:05
on CSS you can call the object and id at same time like this: h4#firstname { background-color:red; } or class h4.classname{ background-color:red } – Alexis Poo Apr 18 '18 at 19:34

Control CSS variable from Angular 5

3 Answers3

Linked

Related