Preset library to help make your Angular components customizable
Ever wanted to build your component highly customizable but wondered how?
Seek no more with the
It allows you to expose essential parts of your components as templates and let others create custom presets for it - extendig your component without ever touching it.
You can create default preset only and ship it with your component but those who consume can choose to use other preset or even create their own.
While creating new preset you can choose to just override one template while keeping other template default.
Also you can combine multiple presets and they will all apply the last one taking precedence.
If you are component developer:
$ npm install --save-dev ng-preset
Or if you are component consumer:
$ npm install --save ng-preset
Developing component with preset
Define a preset interface
First decide which parts of your component you want to make extendable via presets (suppose it's header, content and footer).
Once decided - create an abstract class that will represent this requirement as a preset:
NOTE: that each property you define should be of type
because that is what will be stamped inside of your component.
And it is required to extend your class from
PresetType for further validations.
You can also optionally provide some context information
that a template will receive once instantiated as a generic argument
but here we will just set them to
Get preset in component
Now in your component you can get preset component:
Stamp preset templates in your component
Once you get preset component you can now render it in your template:
// my.component.htmlheaderng-container ="presetComp.headerTpl"/ng-container/headerarticleng-container ="presetComp.contentTpl"/ng-container/articlefooterng-container ="presetComp.footerTpl"/ng-container/footer
That's all you need for the component!
Now you also probably want to provide some default preset for it, so go ahead and create new component.
Default preset component
Create new component that will just implement interface you defined in Define a preset interface section
NOTE: Make sure you extend your preset class so that it can ba validated later.
That is all you need to have in your preset component!
Now it's time to glue them together in the module.
Create just component module
Create a module with just your component on it's own:
Do not forget to export your component here.
With this module we can then create 2 more modules that will allow presets.
Module with default preset
This module is the default module and should contain default preset in it already setup and ready to roll:
NOTE: that we have to declare preset component here and also pass it
to the imported
But what if the user have another preset for your component?
Create another module that will allow user to pass it's own preset component.
NOTE: here it is important to pass generic argument because then users will be checked and warned by Typescript compiler that the preset does not match.
We are having 2 separate modules because if user provides it's own preset -
we do not want him to pay the cost of carrying unused default presert.
It will be simply eliminated at the build time from the bundle.
Consuming component with preset
Most users will consume component with default preset in which case nothing special will be needed, just import the module:
// app.module.ts; // Some library
And when you have some preset that you want to use with component just import custom version of module:
// app.module.ts; // Some library; // Some preset library
The component will be customized from now on!
Demo App server
ng serve for a dev server. Navigate to
http://localhost:4200/. The app will automatically reload if you change any of the source files.
npm run build and
dist filder will be generated.
Running unit tests
npm test to execute the unit tests via
MIT © Alex Malkevich