JavaScript Edu Resources. Angular Courses. React Tutorials. Join us!

Styling Angular 2 components

  • In fact, there are three ways to associate CSS styles to a component in Angular: Component inline styles, style urls and template inline styles.
  • But not only that, when Angular fetches the style resources, it takes the text response, inlines and appends them after all component inline styles.
  • So if we would have a configuration like this:

    And the content would look like this:

    We will end up with a document head that looks something like this:

    This also brings us to the next conclusion that styles defined in style urls will always be appended and therefore override styles defined in the component, unless the inline styles don’t have a higher specificity.

  • In fact, when thinking in Web Components it’s quite common to put styles directly into the template of a component, since they will be encapsulated when Shadow DOM is used.
  • Translating the styles used above to template inline styles would look something like this (in case of our zippy component):

    Guess what, also those will be appended in the head of our document, after the ones defined in the component or as style urls.

Styling Angular components by thoughtram

Comments are closed, but trackbacks and pingbacks are open.