Styles in component for D3.js do not show in angular 2

Question

I am using Angular 2 and D3.js. I want to show a red rectangle.

It only works if I put styles in the style.css file. Check this plunkr

When

Answer 1

...then I cannot show one red and one green rectangle... The problem comes back

I think it's some override, I do not know how much of this is true, but I think this solves your problem.

add in child1-cmp, child1-cmp .bar for example:

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'child1-cmp',
   styles: [`
    child1-cmp .bar {
      fill: red;
    }
  `],
  template: `
    

      
    
  `,
  directives: []
})

Note: in addition to encapsulation: ViewEncapsulation.None, as mentioned by micronyks.

Test

Plunker

---

or this:

@Component({
  selector: 'my-app',
  directives: [Child1Cmp, Child2Cmp],
   encapsulation: ViewEncapsulation.None,
   styles: [`
    child1-cmp .bar {
      fill: red;
    }
  
    child2-cmp .bar {
      fill: yellow;
    }
  `],
   ..//

---

@Component({
  //encapsulation: ViewEncapsulation.None,
  selector: 'child1-cmp',
  template: `
    

      
    
  `,
  directives: []
})

---

@Component({
  //encapsulation: ViewEncapsulation.None,
  selector: 'child2-cmp',
  template: `
    

      
    
  `,
  directives: []
})

Test

Plunker

---

or this using class .chart1, .chart2, for example if you want.

@Component({
  selector: 'my-app',
  directives: [Child1Cmp, Child2Cmp],
   encapsulation: ViewEncapsulation.None,
   styles: [`
    .chart1 .bar {
      fill: red;
    }
  
    .chart2 .bar {
      fill: yellow;
    }
  `],
   ..//

Test

Plunker