Component's and CSS Styling

Angular Component Style Encapsulation Explained

In angular each component has its own style sheet and those rules will only apply to that component. This is called Encapsulation. Quick example

foo.component.ts

Import { Component } from "@angular/core"; (

@Component({
  selector: "foo-component",
  templateURL: './foo.component.html'.
  styles: [ ['.header { background-color: black; }']]   
})
export class MyComponent {
   constructor(){}
}

bar.component.ts

Import { Component } from "@angular/core"; (

@Component({
  selector: "bar-component",
  templateURL: './bar.component.html'.
  styles: [['.header { background-color: green }']]   
})
export class MyComponent {
   constructor(){}
}

Lines 6: Of both foo.component.ts & bar.component.ts have the same CSS class header each with a different background color, ( black and green ); Despite both components having the same CSS class each component will have its CSS rules applied. In a normal webpage one would overwrite the other in the stylesheet.