title: Changing CSS of dynamically loaded Angular elements
body: <p>I have implemented <a href="https://www.npmjs.com/package/ng2-image-viewer" rel="nofollow noreferrer">ng2-image-viewer</a> 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. </p>
  
  <p>Here is what i have by default.</p>
  
  <p><a href="https://i.stack.imgur.com/I7bmZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I7bmZ.png" alt="enter image description here"></a></p>
  
  <p>The HTML component of above before rendering is as follows,</p>
  
  <pre><code>&lt;div class="image-viewer-container"&gt;
      &lt;app-image-viewer 
      [images]="[artURL]"
      [loadOnInit]="true"
      [idContainer]="'idOnHTML'"
      [showOptions]="false"
      &gt;
      &lt;/app-image-viewer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The HTML component of above after rendering is as follows,</p>
  
  <pre><code>&lt;div _ngcontent-pyx-c10="" class="image-viewer-container"&gt;
      &lt;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"&gt;
          &lt;div _ngcontent-pyx-c11="" class="image-gallery-2" id="idOnHTML"&gt;
              &lt;div _ngcontent-pyx-c11="" class="image-container iv-container"&gt;
                  &lt;div class="iv-wrap"&gt;
                      &lt;div class="iv-loader" style="display: none;"&gt;&lt;/div&gt;
                      &lt;div class="iv-snap-view" style="opacity: 0; pointer-events: none;"&gt;
                          &lt;div class="iv-snap-image-wrap"&gt;&lt;img class="iv-snap-image" src="http://localhost/artworks/art/a/aagaard/rosegard.jpg" style="width: 137.062px; height: 149px;"&gt;
                              &lt;div class="iv-snap-handle" style="top: 0px; left: -130.863px; width: 398.787px; height: 149px;"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="iv-zoom-slider"&gt;
                              &lt;div class="iv-zoom-handle" style="left: 0px;"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="iv-image-view"&gt;
                          &lt;div class="iv-image-wrap"&gt;&lt;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;"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div _ngcontent-pyx-c11="" class="inline-icon" style="background-color: rgb(1, 118, 189);"&gt;
                  &lt;div _ngcontent-pyx-c11=""&gt;
                      &lt;!--bindings={
    "ng-reflect-ng-if": "true"
  }--&gt;
                      &lt;a _ngcontent-pyx-c11="" class="image-viewer-tooltip ng-star-inserted"&gt;
                          &lt;!--bindings={
    "ng-reflect-ng-if": "true"
  }--&gt;&lt;span _ngcontent-pyx-c11="" class="tooltiptext filterTooltip ng-star-inserted"&gt;&lt;span _ngcontent-pyx-c11=""&gt;Show only PDF:&lt;/span&gt;&lt;i _ngcontent-pyx-c11="" class="material-icons"&gt;close&lt;/i&gt;&lt;/span&gt;&lt;i _ngcontent-pyx-c11="" class="material-icons footer-icon" style="color: white;"&gt;picture_as_pdf&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;!--bindings={
    "ng-reflect-ng-if": "false"
  }--&gt;
              &lt;/div&gt;&lt;i _ngcontent-pyx-c11="" class="material-icons prev"&gt;keyboard_arrow_left&lt;/i&gt;&lt;i _ngcontent-pyx-c11="" class="material-icons next"&gt;keyboard_arrow_right&lt;/i&gt;
              &lt;div _ngcontent-pyx-c11="" class="footer-info" style="background-color: rgb(1, 118, 189);"&gt;&lt;span _ngcontent-pyx-c11="" id="current"&gt;1&lt;/span&gt;/&lt;span _ngcontent-pyx-c11="" class="total"&gt;1&lt;/span&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/app-image-viewer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>All i'm trying to do is apply following to the rendered HTML by simply defining them in <code>SCSS</code> but it's not seem to be working.</strong></p>
  
  <pre><code>.iv-snap-view{
      visibility: visible !important;
      opacity: 1;
  }
  .image-gallery-2{
      visibility: hidden;
  }
  </code></pre>