How to share styles between Angular Components

Today I'm going to show you different ways to share styles between components in Angular, and I guess some techniques can apply to other frameworks as well.

The scenario

I'm currently doing (another) login page. This time, I wanted to show a message before the user signs up, and give him a choice between login and register. So, with this, I have 3 components. And I want those 3 components to share the same styles.

With a CSS class

Angular usually has a style file that allows you to apply classes globally in your application. You can create a class there and apply it to your components, and that you can do it in two ways, using host property, and using HostBinding decorator.

• Declaring the CSS class

  // In your style file, usually styles.scss
  .auth {
    // The styles you want to share
  }

• Using the CSS class with host

  @Component({
    // Stuff you know...
    host: {
      class: "auth"
    }
  })
  class WelcomeComponent {}

• Using the CSS class with HostBinding

  @Component({
    // Stuff you know...
  })
  class WelcomeComponent {
    @HostBinding("class")
    public readonly classList = "auth";
  }

Whatever version will do the same, but I prefer the first for static values and the second for dynamic values.

Using a shared component style file

When you are using the style file from the component you can do interesting things like :host and ::ng-deep, that may be valuable to you. When you decorate a file and use the styleUrls property you sure have noticed that it should be an array of values. And you can take advantage of that and use another style file with the common styles and it will be applied the same way the component style is.

@Component({
  // Stuff you know...
  styleUrls: ["./welcome.component.scss", "../shared.scss"]
})
class WelcomeComponent {}

Keep in mind that the URL should be relative to the component folder.

Using SCSS @import

This is a classic one, but we may end up forgetting that Angular does nothing special with SCSS files, and we can even use Webpack features to import from src folder. Here is how you can do it.

• Declaring the mixin

  // src/styles/_auth.scss
  @mixin auth {
    :host {
      // The styles you want to share
    }
  }

• Using the mixin

  // src/../welcome.component.scss
  @import "src/styles/auth";

  @include auth;

That's all folks!

You now have three ways of sharing styles in your app. Do you think you are going to use one of these? Do you have another way to share styles between your components? Let me know in the comments. Of course, you could always create another component just to apply styles, but I think sometimes CSS is just what you need.

PS: For what's worth, I end up using the latest one.