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, using external style, using template inline style, using ngClass directive, ngStyle directive etc. We cover all 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 does not bleed to another view.

Further Reading On Component styles

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

Example Application

Create a new angular application

Create three component as shown below

Copy the following code to AppRoutingModule


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

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 depend on the ViewEncapsulation strategy used by the component. By default, Angular uses the ViewEncapsulation.Emulated , which ensures that the component styles do not bleed out to other components. 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 takes 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, by which you can style the entire component. There are few ways you can add style to individual elements in the angular

Leave a Comment

Your email address will not be published.

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

Scroll to Top