Expose and use customizable variables in Angular library

Question

I have made an Angular library containing one component myComponent. I can successfully build it and use it in my main application. I want to add the functionality of customizing some of the scss variables that are used in myComponent by the consuming main application. I could not find any exhaustive guides on this topic. What I have so far:

In my lib, i have a theme.scss file that contains the variables that i want to be customizable. It is properly exported along with the lib by setting the assets value of the ng-package.json file.
myComponent uses the variables defined in theme.scss.
however, when i build the lib, the resulting files in dist no longer have the relationship to the theme.scss file, as the scss code is compiled by ng build. Therefore, changing the variables in the consuming app does nothing to myComponent.

Is it possible to get the desired behavior?

bmurauer · Accepted Answer · 2022-09-22 14:18:12Z

using CSS3 variables, I have enough control over the parameters that i want to offer. The resulting structure is as follows:

mylib
  ng-package.json
  scss
    mytheme.scss
  src
    public-api.ts
    lib 
      my.component.ts   <- standalone component
      my.component.scss

ng-package.json:

{
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../../dist/mylib",
  "lib": {
    "entryFile": "src/public-api.ts",
    "styleIncludePaths": [
      "scss"
    ]
  },
  "assets": [
    "scss/*"
  ]
}

theme.scss:

:root {
  --some-size-variable: 3px;
  --some-color-variable: #22aaff;
}

public-api.ts:

export * from './lib/my.component';

my.component.ts:

@Component({
  standalone: true,
  template: '',
  styleUrls: ['my.component.scss'],
})
export class MyComponent {
  // lots of Angular goodness
}

my.component.scss:

@import 'mytheme';  // <-- this import is possible without relative path due
                    //     to the "styleIncludePaths" in ng-package.json.

:host {
  border-radius: var(--some-size-variable);
  color: var(--some-color-variable);
}

Then, in the consuming application, the variables can be overwritten in a global scss file:

@import '~mylib/scss/mytheme'; 

$main-color-of-consuming-application: #ff0000;

:root {
  --some-size-variable: 4px;
  --some-color-variable: #{$main-color-of-consuming-application};
}

Lucas Moreira · Accepted Answer · 2022-09-22 11:16:16Z

1

You can turn off view encapsulation in your component. That way the styles applied are going to act as a global css file, that is probably the reason why the relationship to the theme file is not being kept

Alternatively you can pass the variables you need in an input to the component, which has the bonus of being explicit in the syntax when you use the component

answered Sep 22, 2022 at 11:16

Lucas Moreira

5061 gold badge4 silver badges14 bronze badges

1 Comment

bmurauer Over a year ago

I just played around with it, and it seems that it does the quite opposite of what I want: If i turn off the encapsulation, the "default" style of the library is applied to all components of the consuming app. I have settled with using CSS3-variables, which give me enough control to tune the few variables i want.

paddotk · Accepted Answer · 2022-09-22 11:24:59Z

1

What I have done in my library for things like this, is adding a provider component. This is a component that you can put at the top of your application, and by adding inputs to it (maybe from a local libVars.js or something) you can set the variables in the ngOnInit of the provider.

// provider.component
const root: any = document.querySelector(':root');
root.style.setProperty(`--primary-color`, this.myColorVar);

// app.component.html
<provider myColorVar="red">
  // app contents
</provider>

Additionally, if you use SCSS, you can assign this dynamically set variable to an SCSS variable like

// style.scss
$myVar: --my-var;

answered Sep 22, 2022 at 11:24

paddotk

1,42721 silver badges36 bronze badges

Collectives™ on Stack Overflow

Expose and use customizable variables in Angular library

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related