Ionic 3 Angular DOM manipulation

Ionic Framework ionic-v3
1

I’m trying to manipulate the DOM dynamically from my TS (JS) by using the following line of code:

document.getElementsByTagName("ion-backdrop")

When outputting this to the console, it writes “HTMLCollection []”.

My problem is that beyond this point, nothing appears to work. I’ve tried the following methods, and all don’t work.

document.getElementsByTagName("ion-backdrop").[0].styles.background("#000")
document.getElementsByTagName("ion-backdrop")[0]. setAttribute("background", #000)

Can anyone suggest how can I dynamically change the background? FYI, I don’t have access to the HTML (this is a native Ionic component).

2

Please do not use document.yadada to select dom elements. You will inadvertently grab other elements in the DOM but not on the page you’re currently looking at. It’s inevitable.

Use ElementRef.

If you look at this example I’ve done before, at the camera.ts you’ll see how I manipulate dom elements safely.

3

Totally agree, but what if my HTML element doesn’t have an ID? How can I THEN use elementRef? I’m trying to manipulate the SCSS of Ionic Loading Controller component (ion-backdrop), which doesn’t have an ID.

4

And the Angular docs on ElementRef say “read the security guide before using ElementRef.”

Re: changing the loading controller, you can override some SASS variables, though I’ve never done it myself for the loading controller.

5

you can set backdrop styles globally in app.scss. Something like this

// http://ionicframework.com/docs/theming/


// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.

ion-backdrop {
 opacity: 0.3;
 background-color: #5f35f5
}
6

DOM manipulation is always going to carry a level of risk.