Manipulate the CSS style of the body element in Angular with Typescript using the important tag

Question

Manipulate the CSS style of the body element in Angular with Typescript using the important tag

Within my Angular application

I have implemented the following code to customize the body style:

  constructor(private elementRef: ElementRef) { }

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

For a specific scenario, I need to add "important" to it

This modification would look like this:

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

However, this approach is not effective, as "important" is not being applied to the style.

Note that since I need to apply this directly to the body element and not to a specific HTML element within my component, ngStyle cannot accomplish this task.

Any suggestions?

javascript css angular typescript angular-template

Answer 1

Answer №1

Here is the solution.

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

Answer 2

Here is the solution.

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

Answer 3

Answer №2

html:

<h2 #elem>super ruler</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');
  }
}

Give it a shot

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

Answer 4

html:

<h2 #elem>super ruler</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');
  }
}

Give it a shot

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

Answer 5

Answer №3

For those instances where you need to apply a class to the body, using Renderer2 can be quite beneficial. Start off by defining two classes:

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

Next, incorporate the renderer into your code:

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

// class declaration omitted

_renderer: Renderer2;

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

If you're uncertain about when to use the !important property:

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');
}

Answer 6

For those instances where you need to apply a class to the body, using Renderer2 can be quite beneficial. Start off by defining two classes:

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

Next, incorporate the renderer into your code:

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

// class declaration omitted

_renderer: Renderer2;

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

If you're uncertain about when to use the !important property:

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');
}

Answer 7

Answer №4

Give this a try. What is the purpose of using elementRefs? Instead, consider using [ngStyle]

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

or

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

Furthermore, if this action occurs automatically upon loading (in ngOnInit), why not just hardcode it in your template? And why not utilize CSS directly and apply it with Angular?

Answer 8

Give this a try. What is the purpose of using elementRefs? Instead, consider using [ngStyle]

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

or

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

Furthermore, if this action occurs automatically upon loading (in ngOnInit), why not just hardcode it in your template? And why not utilize CSS directly and apply it with Angular?

Manipulate the CSS style of the body element in Angular with Typescript using the important tag

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Error: React - Unable to access the 'lazy' property because it is undefined

Issue with fullPage.js - Unable to scroll to footer on the last section of the page

Trigger a click event upon page load using jQuery or JavaScript

The Battle of Priority: Conflicting !Important Declarations in CSS

Extract information from an HTML table into PHP

Tips for defining types for a function that serves as an argument and can accept any parameters and return any values

Just updated to Mongoose 5.0.13 and encountered a 500 error in an angular-fullstack generated application due to a bluebird error - specifically, an error message stating: "Error: expecting an

Issue NG1006: Class has two conflicting decorators applied

Building a table in Quasar by utilizing nested objects

Removing a key from an index signature in Typescript - a step-by-step guide

The distinction between storing data and component data becomes apparent when using Vuex in conjunction with a persisted state

Moving the starting directory of a NodeJS application on Azure

Show fixed div at specific height

What steps are involved in switching the package manager for the Angular CLI, for example, replacing npm with pnpm when using `ng add`?

Include a border around the list items within two separate columns

Showing a boolean value in a FormGroup: A step-by-step guide

Best practices for transitioning a project from TypeScript 3 to TypeScript 4?

What is the process for incorporating an array of models?

Arrange the dynamically created card positions

Creating a new dynamic page can be achieved by clicking on a dynamically generated link. Would you like to learn how to do that?