Changing CSS of dynamically loaded Angular elements - html

Question

I have implemented ng2-image-viewer library to my image view and it's dynamically loading many HTML components. I wish to change the CSS of some of the dynamically loaded elements.
Here is what i have by default.
The HTML component of above before rendering is as follows,
<div class="image-viewer-container">
<app-image-viewer
[images]="[artURL]"
[loadOnInit]="true"
[idContainer]="'idOnHTML'"
[showOptions]="false"
>
</app-image-viewer>
</div>
The HTML component of above after rendering is as follows,
<div _ngcontent-pyx-c10="" class="image-viewer-container">
<app-image-viewer _ngcontent-pyx-c10="" _nghost-pyx-c11="" ng-reflect-id-container="idOnHTML" ng-reflect-images="http://localhost/artworks/art/" ng-reflect-load-on-init="true" ng-reflect-show-options="false">
<div _ngcontent-pyx-c11="" class="image-gallery-2" id="idOnHTML">
<div _ngcontent-pyx-c11="" class="image-container iv-container">
<div class="iv-wrap">
<div class="iv-loader" style="display: none;"></div>
<div class="iv-snap-view" style="opacity: 0; pointer-events: none;">
<div class="iv-snap-image-wrap"><img class="iv-snap-image" src="http://localhost/artworks/art/a/aagaard/rosegard.jpg" style="width: 137.062px; height: 149px;">
<div class="iv-snap-handle" style="top: 0px; left: -130.863px; width: 398.787px; height: 149px;"></div>
</div>
<div class="iv-zoom-slider">
<div class="iv-zoom-handle" style="left: 0px;"></div>
</div>
</div>
<div class="iv-image-view">
<div class="iv-image-wrap"><img class="iv-image iv-large-image" src="http://localhost/artworks/art/a/aagaard/rosegard.jpg" style="visibility: visible; width: 597px; height: 649px; left: 570px; top: 0px; max-width: none; max-height: none;"></div>
</div>
</div>
</div>
<div _ngcontent-pyx-c11="" class="inline-icon" style="background-color: rgb(1, 118, 189);">
<div _ngcontent-pyx-c11="">
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<a _ngcontent-pyx-c11="" class="image-viewer-tooltip ng-star-inserted">
<!--bindings={
"ng-reflect-ng-if": "true"
}--><span _ngcontent-pyx-c11="" class="tooltiptext filterTooltip ng-star-inserted"><span _ngcontent-pyx-c11="">Show only PDF:</span><i _ngcontent-pyx-c11="" class="material-icons">close</i></span><i _ngcontent-pyx-c11="" class="material-icons footer-icon" style="color: white;">picture_as_pdf</i></a>
</div>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</div><i _ngcontent-pyx-c11="" class="material-icons prev">keyboard_arrow_left</i><i _ngcontent-pyx-c11="" class="material-icons next">keyboard_arrow_right</i>
<div _ngcontent-pyx-c11="" class="footer-info" style="background-color: rgb(1, 118, 189);"><span _ngcontent-pyx-c11="" id="current">1</span>/<span _ngcontent-pyx-c11="" class="total">1</span></div>
</div>
</app-image-viewer>
</div>
All i'm trying to do is apply following to the rendered HTML by simply defining them in SCSS but it's not seem to be working.
.iv-snap-view{
visibility: visible !important;
opacity: 1;
}
.image-gallery-2{
visibility: hidden;
}

Answer 1

As the component's style is encapsulated (You can read more about this here), you have two options:
Create a global stylesheet and add the styles needed there, or just copy the global styles into src/styles.css
Use ::ng-deep. You can find more info here
Applying the ::ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for that rule. Any style with ::ng-deep applied becomes a global style. In order to scope the specified style to the current component and all its descendants, be sure to include the :host selector before ::ng-deep. If the ::ng-deep combinator is used without the :host pseudo-class selector, the style can bleed into other components.
Note: Even though the ::ng-deep is deprecated, it is not specified when it will be removed as there is no alternative for now.