Using Angular components to manipulate the CSS in the DOM

Question

Using Angular components to manipulate the CSS in the DOM

Struggling with dom manipulation in an angular/node.js environment using typescript for my visualcomponent.html

The second inline styling works fine, showing the h1 in blue color. However, I run into issues when trying to embed strings within the innerHTML as shown below: inside my visual.component.ts:


  htmlVariable:string = "<h1 style = 'color:blue; margin-left:30px;'> not working</h1>"
  constructor(private _httpService: HttpService, private _route: ActivatedRoute,
  private _router: Router) { }

Is there another method to manipulate the CSS? I haven't found a way to do it through vision.component.css like I can through inner HTML in the .html file. Thank you for your assistance.

javascript html css angular typescript

Answer 1

Answer №1

If you want direct access to DOM elements in Angular, consider using ElementRef.

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

@Component({
    selector: 'my-app'
})
export class AppComponent implements ngOnInit {

constructor(private _httpService: HttpService, private _route: ActivatedRoute, private _router: Router, private _elementRef : ElementRef) { }

ngOnInit(): void
{
  this.ModifyDOMElement();
}

 ModifyDOMElement() : void
 { 
   let domElement = this._elementRef.nativeElement.querySelector(`#someID`);
   domElement.style.color = "Red"; //Apply CSS Properties here
 } 

}

Your HTML:

<h1 id="someID"></h1>

Answer 2

If you want direct access to DOM elements in Angular, consider using ElementRef.

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

@Component({
    selector: 'my-app'
})
export class AppComponent implements ngOnInit {

constructor(private _httpService: HttpService, private _route: ActivatedRoute, private _router: Router, private _elementRef : ElementRef) { }

ngOnInit(): void
{
  this.ModifyDOMElement();
}

 ModifyDOMElement() : void
 { 
   let domElement = this._elementRef.nativeElement.querySelector(`#someID`);
   domElement.style.color = "Red"; //Apply CSS Properties here
 } 

}

Your HTML:

<h1 id="someID"></h1>

Answer 3

Answer №2

To achieve the same outcome, consider implementing a custom pipe with the assistance of DomSanitizer.

import { Component, NgModule, Pipe, PipeTransform } from '@angular/core'
import { DomSanitizer } from '@angular/platform-browser'

@Pipe({ name: 'safeHtml'})

export class SafeHtmlPipe implements PipeTransform  {

  constructor(private sanitized: DomSanitizer) {}

  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

When you need to bind this variable in the view portion as innerHTML, utilize this custom pipe to ensure your styles function correctly-

<div [innerHTML]="htmlVariable | safeHtml"></div>

Note: Ensure that you've imported the pipe into your main module before usage.

For more detailed information, refer to the following resource:

https://angular.io/api/platform-browser/DomSanitizer#members

Answer 4

To achieve the same outcome, consider implementing a custom pipe with the assistance of DomSanitizer.

import { Component, NgModule, Pipe, PipeTransform } from '@angular/core'
import { DomSanitizer } from '@angular/platform-browser'

@Pipe({ name: 'safeHtml'})

export class SafeHtmlPipe implements PipeTransform  {

  constructor(private sanitized: DomSanitizer) {}

  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

When you need to bind this variable in the view portion as innerHTML, utilize this custom pipe to ensure your styles function correctly-

<div [innerHTML]="htmlVariable | safeHtml"></div>

Note: Ensure that you've imported the pipe into your main module before usage.

For more detailed information, refer to the following resource:

https://angular.io/api/platform-browser/DomSanitizer#members

Using Angular components to manipulate the CSS in the DOM

Answer №1

Answer №2

Similar questions

What is the best way to deactivate unclicked href links within a loop?

flash animation on an HTML webpage (fancy pop-up)

Disabling the Parent Component Form Submit button until the child component fields are deemed valid

Add a component to another component in real-time

Unable to modify border color for Material-UI OutlinedInput

Issues with Angular Reactive Forms Validation behaving strangely

Ensure that when you click on the next dropdown menu opener button, the previous dropdown menu closes and only the new menu remains open

Iterating through a legitimate JSON object and storing each data value in a separate variable

Framer Motion's AnimatePresence feature fails to trigger animations when switching between pages

Issues with Media Query in Mobile Device Footer not Resolving

The message of error is undetermined

Fixing the slide bar in React using styled components

Enable the button if at least one checkbox has been selected

Flexbox properties are being ignored by input fields

The error message states: "TypeError: a.map is not a function"

Setting up configurations in an Angular app using environment variables from a Spinnaker manifest

Tips for displaying a specific PDF file using the selected programming language

Using Sass variables within Angular2 components

Struggling to add custom styles to an Ionic radio button

Acquiring the specific checkbox value using JQuery

Using Angular components to manipulate the CSS in the DOM

Answer №1

Answer №2

Similar questions

What is the best way to deactivate unclicked href links within a loop?

flash animation on an HTML webpage (fancy pop-up)

Disabling the Parent Component Form Submit button until the child component fields are deemed valid

Add a component to another component in real-time

Unable to modify border color for Material-UI OutlinedInput

Issues with Angular Reactive Forms Validation behaving strangely

Ensure that when you click on the next dropdown menu opener button, the previous dropdown menu closes and only the new menu remains open

Iterating through a legitimate JSON object and storing each data value in a separate variable

Framer Motion's AnimatePresence feature fails to trigger animations when switching between pages

Issues with Media Query in Mobile Device Footer not Resolving

The message of error is undetermined

Fixing the slide bar in React using styled components

Enable the button if at least one checkbox has been selected

Flexbox properties are being ignored by input fields

The error message states: "TypeError: a.map is not a function"

Setting up configurations in an Angular app using environment variables from a Spinnaker manifest

Tips for displaying a specific PDF file using the selected programming language

Using Sass variables within Angular2 components

Struggling to add custom styles to an Ionic radio button

Acquiring the specific checkbox value using JQuery

Using Angular components to manipulate the CSS in the DOM