Angular : how to programatically set css style to body as important in typescript

Question

Under my angular app

I'm using this code to set a custom body style :

  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
    this.elementRef.nativeElement.ownerDocument.body.style.overflowY = 'hidden';
  }

for some specific scneario i myust add "important" to it

this would be like this :

   this.elementRef.nativeElement.ownerDocument.body.style.overflowY = 'hidden !important';

But that is not working , and "important is not added to the style.

To note ; since i need to apply this for the body itself , and not to a specific html element unside my component , ngStyle cannot do it.

Suggestions ??

Does this answer your question? [I'm unable to inject a style with an "!important" rule](https://stackoverflow.com/questions/7917608/im-unable-to-inject-a-style-with-an-important-rule) — Nico O, Jul 07 '20 at 14:56

score 5 · Accepted Answer · answered Jul 07 '20 at 15:10

5

This should work.

this.elementRef.nativeElement.ownerDocument.body.style.setProperty("overflow-y", "hidden", "important");

answered Jul 07 '20 at 15:10

JerMah

693
5
17

But WHY use Angular for that in the first place?? I just don't understand why `body { overflow-y : hidden !important }` in CSS wouldn't work? Why use Angular, with an elementRef, an ngOnInit and everything, simply to put a basic CSS rule on the body? It really seems to me that we are solving an extremely simple problem with a very complicated solution – Jeremy Thille Jul 08 '20 at 05:01
@JeremyThille, obviously he is doing somthing wrong if you need to use js like that in angular. But we've all had such situations where it just needs a quick fix for something that might become too complicated otherwise. – JerMah Jul 08 '20 at 08:55

score 4 · Answer 2 · answered Jul 07 '20 at 15:29

html:

<h2 #elem>hiper king</h2>

ts:

import { Component, ViewChild, Renderer2, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
  title = 'stackApp';
  @ViewChild('elem') elem: ElementRef;
  constructor(private renderer: Renderer2) { }
  ngAfterViewInit() {
    this.renderer.setAttribute(this.elem.nativeElement, 'style', 'overflowY: hidden !important');
  }
}

Try this

Ref: Either i am using Angular Renerer2 wrong, or it is broken. Can anyone figure this out?

score 1 · Answer 3 · answered Jul 07 '20 at 15:17

When you need to add a class to the body, Renderer2 is a good option. First create 2 classes:

.overflowYHidden {
  overflow-y: hidden;
}
.overflowYHiddenImportant {
  overflow-y: hidden !important;
}

Now use the renderer:

import { Renderer2, RendererFactory2 } from '@angular/core';

// class declaration skipped

_renderer: Renderer2;

constructor(rendererFactory: RendererFactory2) {
  this._renderer = rendererFactory.createRenderer('body', null);
}

I don't know what logic you're using for when to use important:

if (someCondition) {
  this._renderer.addClass(document.body, 'overflowYHidden');
  this._renderer.removeClass(document.body, 'overflowYHiddenImportant');
} else {
  this._renderer.addClass(document.body, 'overflowYHiddenImportant');
  this._renderer.removeClass(document.body, 'overflowYHidden');
}

score -1 · Answer 4 · answered Jul 07 '20 at 14:54

-1

Try this. Why use elementRefs? Just use [ngStyle]

<div [ngStyle]="{ 'overflowY' : 'hidden !important' }"></div>

or

<div [style.overflowY ]="'hidden !important'"></div>

Also, if it happens automatically on load (in ngOnInit), why not simply hardcode it in your template? And why don't you simply use CSS and add it with Angular?

answered Jul 07 '20 at 14:54

Jeremy Thille

26,047
12
43
63

i need to apply custom style to the body, it s not for a simple element u side my component – firasKoubaa Jul 07 '20 at 14:59
So why do you even use Angular at all? Why don't you apply CSS to the body directly? I'm lost, it seems to me that you want to do something extremely simple in a very complicated way – Jeremy Thille Jul 08 '20 at 05:00
no ; i ve to activate / desactiavte a scroll on the main page programmatically after c button click (which open a popup) – firasKoubaa Jul 08 '20 at 12:38
But still, why do you need Angular for that? A simple vanilla Javascript line would do. Select the body, add or remove a class, job done. This is still overly complicated. – Jeremy Thille Jul 08 '20 at 12:44
cauz it's basically an angular app , – firasKoubaa Jul 08 '20 at 12:46
arghhhhhh OK so you just won't understand my point. Just keep using ElementRefs and ngOnInit when you can simply toggle a class with one line of pure JS IN YOUR ANGULAR COMPONENT, so it is still controlled by Angular if you need, but without all this complicated stuff. I would do this in one line in my Angular app, but you absolutely want to use plenty of complicated things and workarounds to reach the same result so... whatever floats your boat ¯\\_(ツ)_/¯ I give up – Jeremy Thille Jul 08 '20 at 13:49
why you re angry , this is the point ; i want to adjust the body overflow when opening a popup and closin it ... if you may do it show me how – firasKoubaa Jul 09 '20 at 12:29

Angular : how to programatically set css style to body as important in typescript

4 Answers4