Angular Component Styles

In this tutorial, we look at various ways by which we can style our Angular Components. We looked at how to apply global styles to the Angular app. You can apply styles to Components in various ways. For example, using inline style, external style, template inline style, ngClass directive, ngStyle directive, etc. We cover all of these in this article on Angular Component styles

The Angular Components maintain their own style & state. But CSS styles are global in scope. The angular encapsulates the component styles using the View Encapsulation strategies. Therefore ensuring that the styles of one component do not bleed into another view.

Further Reading On Component styles

Example Application

Create a new angular application

Create three component as shown below

Copy the following code to AppRoutingModule

Copy the following code to app.component.html

How to add styles to Angular Components

The Angular allow us the specify the component specific styles. There are four ways you can apply style.

  1. Component Inline style
  2. Component External Style
  3. Template using link directive
  4. Template using style directive

How these styles affect the component and other components, depends on the ViewEncapsulation strategy used by the component. By default, Angular uses ViewEncapsulation.Emulated , which ensures that the component styles do not bleed out to other components. You can click to find out more about View Encapsulation in Angular.

Component Inline Style

Use the styles: metadata of the @Component or @Directive to specify the CSS rules as shown below.

Use backtick character to enter the multi-line style.

You can add multiple styles by separating each other using a comma as shown below.

Component External Style

Specify the external style sheets using the styleUrls: meta data of the @Component decorator or @directive directive.

You can add multiple styles by separating each other using a comma as shown below

You can specify both Component inline & Component External style together as shown below

The Angular inserts component inline style first and then inserts the component external style. Hence, component external styles take precedence over the component inline styles.

Template Inline Style using style tag

We can also specify style within the component template file by using the <style> or <link> tags as shown below

test2.component.html

Template Inline Style using link tag

You can add the external style sheets using the the link tag as shown below. The path must be relative to the index.html

You can also load the CSS from an external source as shown below

Style Priority

The styles are applied in the following order

  1. Component inline styles i e. Styles defined at @Component.styles
  2. Component External styles i.e. @Component.styleUrls
  3. Template Inline Styles using the style tag
  4. Template External Styles using the link tag

Other ways to add style to component

The above method lists the various ways you can style the entire component. There are a few ways you can add style to individual elements in the angular

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top