How can I reuse CSS styles between different components in Angular

Question

Edit - Following comments and thinking this through a bit, I have added the options as I see them to the bottom of this question.

Original Question I have an Angular component (down below, html and scss file, nothing really in the component class for brevity). Lets call it "h5-underliner" and used like:

<app-h5-underliner>My Title</app-h5-underliner>

`

h5 {
    margin-bottom: 1.8rem;
    padding-bottom: 2rem;
    position: relative;
}

h5:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0.1rem;
    height: 0.2rem;
    width: 6rem;
    background: $colour-apg-accent;
}

<h5 [class]="colourThemeName">
    <ng-content></ng-content>
</h5>

`

Now say for example I want an "h2 underliner"

<app-h2-underliner>My Heading 2 Title</app-h2-underliner>

Which picks up the apps h2 styling.

How can I aceive this without duplicating all the css (which would end up something like the below:)

`

h2 {
    margin-bottom: 1.8rem;
    padding-bottom: 2rem;
    position: relative;
}

h2:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0.1rem;
    height: 0.2rem;
    width: 6rem;
    background: $colour-apg-accent;
}

`

It's not a huge example, but I dont like the repetition. I thought about a directive, but the pseudo selector after kills that idea (as far as I am aware).

Note there is a little bit of extra going on as the caller can choose a colour, but that just means more repetition between very similar components (i.e. only the h5 and h2 tags differ).

So options:

Option 1 - The mess abouve with <h2-underliner>Mt Title Text<\h2-underliner> and <h5-underliner>Mt Title Text<\h5-underliner> - bad for several reaons.

Option 2 - Global style for the css that can be applied to tags as required (.my-underliner) OR we make the decision that all h5 and h2 titles have this style. On one hand we set typography globally with mat custom typography - but it doesn't seem right to start adding global css for general css.

Option 3 - A component that follows the same pattern as material form field/content projection: <app-underliner><h5>My title text</h5></app-underliner> - in this case we contain the common style to one component and still have the freedom to use it with different headings.

Is there any particular reason why you cannot just use a css class to apply these stylings where you need them? — Mikkel Christensen
– Mikkel Christensen, Commented Apr 13, 2021 at 1:01
@MikkelChristensen I guess I am looking for the best pattern to use - I added this as an option. — kenam
– kenam, Commented Apr 13, 2021 at 7:26

Panagiotis Bougioukos · Accepted Answer · 2021-04-12 23:08:49Z

3

Styles follow hierarchical override in angular. So if both of those components that you refer lets call them B, C are children of component A, then you can put those styles on component A.

Then B, C will inherit those styles from parent A

They don't even have to be direct children of A to inherit styles of A. So in a structure like

 A - D - C

 |_ B

D, C , B will inherit styles declared in component A

edited Apr 12, 2021 at 23:08

answered Apr 12, 2021 at 22:58

Panagiotis Bougioukos

19.6k4 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

kenam Over a year ago

Hey thanks, but I should clarify. I have the need for some places to add an underline to a H2 tag and in other places a H5. The underline is practically the same. If it were not in angular, you could just apply a class to both. But that doesn't feel right in Ng (a global style).

kenam Over a year ago

I guess I could have '<app-titler><h5>My title text</h5></app-titler>'. But what CSS can I add to the app titler?

Panagiotis Bougioukos Over a year ago

@kenam you don't do it like that. You have <app-titler></app-titler> and then you go inside the component app-titler and in html file or template you declare <h5>....</h5> and also in styles file whatever you want for H5 or you do it on a parent component and you inherit the style from parent

kenam Over a year ago

That's kind of what I had, but now I'm thinking. it's a bit like '<mat-form-field>' pattern? The underliner/titler component will apply the underline to whatever is inside the component tags? It's late I need to think about this tomorrow!

kenam Over a year ago

I updated the question - I think I have what you are saying, sorry if I misunderstood - please let me know.

Collectives™ on Stack Overflow

How can I reuse CSS styles between different components in Angular

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related