title: Why does my angular component ignore my css file?
body: <p>I have an angular component with this file structure:</p>
  
  <pre><code>.
  |____custom-d3-tree.component.css
  |____custom-d3-tree.component.spec.ts
  |____custom-d3-tree.component.ts
  |____custom-d3-tree.module.ts
  |____custom-d3-tree.service.spec.ts
  |____custom-d3-tree.service.ts
  |____tree.dendo.model.ts
  </code></pre>
  
  <p>The file <code>tree.denco.model.ts</code> defines:</p>
  
  <pre><code>export class TreeModel {
  </code></pre>
  
  <p>It implements a d3 tree.  The nodes in the tree have <code>foreignObject</code>'s defined in them that contain an order list.  Here is the code that adds to foreignObject to the rectangular nodes:</p>
  
  <pre><code>    nodeEnter.append('foreignObject')
        .attr('x', function(d) { if(d.data.component_type) { return 5; } return 0; })
        .attr('y', function(d) { if(d.data.component_type) { return 5; } return 0; })
        .attr('width', this.rect_width)
        .attr('height', this.rect_height)
        .style('overflow', 'auto')
        .append('xhtml')
        .style("font", "10px 'Helvetica Neue'")
        .html(function (d) {
          if( d.data.component_type ) {
            return '&lt;div style="width: ' + (d.width - 10) + 'px; height: '
              + (d.height - 10 ) + 'px;" class="node-text wordwrap"&gt;'
              + '&lt;b&gt;' +  d.data.name + '&lt;/b&gt;&lt;br&gt;&lt;br&gt;&lt;/div&gt;';
          } else {
            let scrollList = '&lt;nav&gt;&lt;ul&gt;';
            let startDate = "2019-04-05";
            for( let i=0; i &lt; d.data.components.length; i++ ) {
              let url = environment.frontEndUrl + '/component-mapping-dynamic?node='
                + d.data.name + '&amp;filter_key=' + d.data.components[i].filter_key;
              // scrollList += '&lt;li style="list-style: ' + 'none' + '"&gt;&lt;a href="'+ url + '"&gt;' + d.data.components[i].name + '&lt;/a&gt;&lt;/li&gt;';
              scrollList += '&lt;li&gt;&lt;a href="'+ url + '"&gt;' + d.data.components[i].name + '&lt;/a&gt;&lt;/li&gt;';
            }
            scrollList += '&lt;/ul&gt;&lt;/nav&gt;';
            return '&lt;div&gt;' +  scrollList + '&lt;/div&gt;';
          }
      });
  </code></pre>
  
  <p>I have a css file, <code>custom-d3-tree.component.css</code> that contains this:</p>
  
  <pre><code>.d3-chart {
    width: 100%;
    min-height:600px;
  }
  
  .wordwrap {
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Firefox */
    white-space: -pre-wrap; /* Opera &lt;7 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* IE */
  }
  
  div:hover {
    overflow-y: scroll;
  }
  
  ul {
    list-style-type: circle;
  }
  nav ul{height:1000px; width:18%; list-style-type: none;}
  
  div {
    height: 100px;
    width: 50%;
    margin: 0 auto;
    overflow: hidden;
    overflow-y: scroll;
  }
  
  /* nav ul{height:100px; width:18%; list-style-type: none;} */
  /* nav ul{overflow:hidden; overflow-y:scroll;} */
  </code></pre>
  
  <p>Here is what the tree looks like when my code runs:</p>
  
  <p><a href="https://i.stack.imgur.com/ZCBrV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZCBrV.png" alt="tree"></a></p>
  
  <p>As you can see most of the if not all the css elements in my file are ignored and I don't understand why.</p>
  
  <p>Update: here is my <code>custom-d3-tree.component.ts</code> file:</p>
  
  <pre><code>import { Component, OnInit, OnChanges, ViewChild, ElementRef,
     Input, Output, EventEmitter} from '@angular/core';
  
  import { AngularD3TreeLibService } from './custom-d3-tree.service';
  @Component({
    selector: 'custom-angular-d3-tree-lib',
    template: `
      &lt;div class="d3-chart" #chart&gt;&lt;/div&gt;
    `,
    styleUrls: ['./custom-d3-tree.component.css']
  })
  export class AngularD3TreeLibComponent implements OnInit, OnChanges {
    @ViewChild('chart') private chartContainer: ElementRef;
    @Input() treeData: any = [];
    @Output() onNodeChanged: EventEmitter&lt;any&gt;= new EventEmitter();
    @Output() onNodeSelected: EventEmitter&lt;any&gt;= new EventEmitter();
  
    constructor( private treeService: AngularD3TreeLibService ) {
      treeService.setNodeChangedListener((node)=&gt;{
        this.onNodeChanged.emit(node);
      });
      treeService.setNodeSelectedListener((node)=&gt;{
        this.onNodeSelected.emit(node);
      });
    }
  
    ngOnInit() {}
    ngOnChanges(changes: any) {
      this.seedTree();
    }
  
    seedTree(){
      if(!!this.treeData){
        this.treeService.createChart(this.chartContainer, this.treeData);
        this.treeService.update();
      }
    }
  }
  </code></pre>