DEV Community

Michael De Abreu
Michael De Abreu

Posted on

 

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
  }
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.

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!