Changing CSS of dynamically loaded Angular elements

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

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 12, 2019 at 14:23

yazantahhan

3,1101 gold badge17 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mercurial Over a year ago

Thank you! Putting style in global style sheet worked! Didn't went for ::ng-deep as it's deprecated.

Collectives™ on Stack Overflow

Changing CSS of dynamically loaded Angular elements

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related