DEV Community

loading...

How to share styles between Angular Components

Michael De Abreu
I’m a developer that do web applications by day, and games by night. I work with Typescript every day, using tools like Angular and React. In this post I like to write about my experiences with those.
・2 min read

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
  }
Enter fullscreen mode Exit fullscreen mode
  • Using the CSS class with host
  @Component({
    // Stuff you know...
    host: {
      class: "auth"
    }
  })
  class WelcomeComponent {}
Enter fullscreen mode Exit fullscreen mode
  • Using the CSS class with HostBinding
  @Component({
    // Stuff you know...
  })
  class WelcomeComponent {
    @HostBinding("class")
    public readonly classList = "auth";
  }
Enter fullscreen mode Exit fullscreen mode

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 {}
Enter fullscreen mode Exit fullscreen mode

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
    }
  }
Enter fullscreen mode Exit fullscreen mode
  • Using the mixin
  // src/../welcome.component.scss
  @import "src/styles/auth";

  @include auth;
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)