title: Angular: How to style dynamically generated html?
body: <p>I have a generated element <code>sub</code> from this line of code with a <code>[sub]</code> property</p>
  
  <pre class="lang-html prettyprint-override"><code>      &lt;li [displayMode]="displayMode" template-menu-item style="cursor: pointer" [routerLink]="['/request/checkoutReview']" icon="fa-shopping-cart" name="Checkout" id="checkout-menu-icon" [sub]="(products$ | async)?.length"&gt;&lt;/li&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/icwKs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/icwKs.png" alt="enter image description here"></a></p>
  
  <p>I'm trying to style the <code>sub</code> element that is generated because the alignment is set to <code>bottom: -.25em;</code></p>
  
  <p>I'm trying to set my own styles for it but none of the styles are being applied.</p>
  
  <pre class="lang-css prettyprint-override"><code>    #checkout-menu-icon &gt; a &gt; div &gt; sub {
          top: 0 !important;
          left: 3px !important;
      }
  </code></pre>
  
  <p>and</p>
  
  <pre class="lang-css prettyprint-override"><code>    #checkout-menu-icon &gt; a &gt; div &gt; .ng-star-inserted {
          top: 0 !important;
          left: 3px !important;
      }
  </code></pre>
  
  <p>How can I apply styles to the <code>sub</code> element below?</p>
  
  <pre class="lang-html prettyprint-override"><code>     &lt;li id="checkout-menu-icon" name="Checkout" style="cursor: pointer" template-menu-item="" _nghost-c13="" tabindex="0" ng-reflect-router-link="/request/checkoutReview" ng-reflect-icon="fa-shopping-cart" ng-reflect-name="Checkout" ng-reflect-sub="1" ng-reflect-display-mode="0" class="ng-star-inserted"&gt;
            &lt;a _ngcontent-c13="" routerlinkactive="active" ng-reflect-router-link="/request/checkoutReview" ng-reflect-router-link-active="active" href="/request/checkoutReview"&gt;
                             &lt;!--bindings={
                                "ng-reflect-ng-if": "true"
                              }--&gt;
             &lt;span _ngcontent-c13="" class="ng-star-inserted" style="color: rgb(69, 69, 69);"&gt;
             &lt;i _ngcontent-c13="" class="fa fa-2x fa-shopping-cart" ng-reflect-klass="fa fa-2x" ng-reflect-ng-class="fa-shopping-cart"&gt;&lt;/i&gt;&lt;/span&gt;
  
             &lt;div _ngcontent-c13="" class="tabName" style="color: rgb(69, 69, 69);"&gt;Checkout
                              &lt;!--bindings={
                              "ng-reflect-ng-if": "1"
                              }--&gt;
                 &lt;sub _ngcontent-c13="" class="ng-star-inserted"&gt;1&lt;/sub&gt;
             &lt;/div&gt;
           &lt;/a&gt;
      &lt;/li&gt;
  </code></pre>