Angular

Last Updated: 8/21/2023

Component Styles

  • There are 3 ways to apply styles to the component

Option 1

  • Using styleUrls property in component metadata
  • You can specify one or more CSS files
  • You can specify master template first and specify additional skins on top of the template
  • In @Component decorator
styleUrls: ['./app.component.css']

Option 2

  • Using styles property in component metadata
  • Write styles inline in the component
  • In @Component decorator
styles: [`
	.glphicon {
		color: red
	}
`]
  • Styles and styleUrls can be used together. Whichever is applied latter will be applied and former will not be added in the output and completely ignored.

Option 3

  • You can specify style in html template (not preferable)
  • Will override other styles
<style>
</style>
  • Angular creates scope for the styles and will not leak outside of the component template
Previous
Next