title: _ngcontent-c4 affecting styling
body: <p>My question differs from <a href="https://stackoverflow.com/questions/45082129/what-does-ngcontent-c-mean-in-angular">this</a> because I am having issues with angular adding the style to some but not the other and it is affecting my display.</p>
  
  <p>It took me good 30 minutes to understand why my UI was rending badly. For visualization purpose, below are the displays in Chrome:</p>
  
  <p>correct when I added _ngcontent-c4="" to the <code>&lt;a&gt;</code> element via Chrome Inspector, it is displayed correctly as others:</p>
  
  <p><a href="https://i.stack.imgur.com/a6gR9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a6gR9.png" alt="enter image description here"></a></p>
  
  <p>The code here is (as copied from Chrome Inspector):</p>
  
  <pre><code>&lt;div _ngcontent-c4="" class="nested-menu  ng-star-inserted"&gt;&lt;!--bindings={
    "ng-reflect-ng-if": "true"
  }--&gt;&lt;!----&gt;&lt;a _ngcontent-c4="" class="list-group-item"&gt;&lt;span _ngcontent-c4=""&gt;&lt;i class="fa fa-ticket"&gt;&lt;/i&gt;&amp;nbsp; Support Ticket&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>the _ngcontent-c4=""  in <code>&lt;a class="list-group-item"...&gt;</code> made the difference when added manually.</p>
  
  <p>And here is the the display when page is loaded first/originally:</p>
  
  <p><a href="https://i.stack.imgur.com/RHfjH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RHfjH.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;div _ngcontent-c4="" class="nested-menu  ng-star-inserted"&gt;&lt;!--bindings={
    "ng-reflect-ng-if": "true"
  }--&gt;&lt;!----&gt;&lt;a class="list-group-item"&gt;&lt;span _ngcontent-c4=""&gt;&lt;i class="fa fa-ticket"&gt;&lt;/i&gt;&amp;nbsp; Support Ticket&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>it misses _ngcontent-c4="" in the <code>&lt;a&gt;</code> element.</p>
  
  <p>I did read about _ngcontent-c4 and that I should turn it off and all but I want to understand fully what is happening.</p>
  
  <p>For background, the Ticket block is inserted into the main nav via:</p>
  
  <pre><code>       &lt;div class="nested-menu" app-shared-nav-bar load_what="ticket"&gt;
  
        &lt;/div&gt;
  </code></pre>
  
  <p>while other elements, such as the Reports block are directly part of the <code>&lt;nav&gt;</code> element and all of them have _ngcontent-c4="" added by default.</p>
  
  <p>the app-shared-nav-bar is:</p>
  
  <pre><code> import { Component, OnInit, Input } from '@angular/core';
  
  @Component({
    selector: '[app-shared-nav-bar]',
    templateUrl: './shared-nav-bar.component.html'
  })
  export class SharedNavBarComponent implements OnInit {
    @Input() load_what = '';
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>and the html is:</p>
  
  <pre><code> &lt;ng-container *ngIf="load_what == 'ticket'"&gt;
  
  
      &lt;a class="list-group-item" (click)="addExpandClass('menu-ticket')"&gt;
          &lt;span&gt;
              &lt;i class="fa fa-ticket"&gt;&lt;/i&gt;&amp;nbsp; {{ "Menu.ticket" | translate }}&lt;/span
          &gt;&lt;/a
      &gt;
  
  
  
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>I essentially want of course for Ticket menu to be styled as the rest. Any help?</p>