I am working on an Angular2 app that includes several components, some of which I want to reuse multiple times on a single page. Instead of having three separate components, I am looking to refactor and combine their functionalities into one.
The basic structure of the component is as follows:
<div class="component-class componentA-main" >
<div class="result componentA">
<div class="canvasContainer">
... common component functionality here ...
<canvas id="canvas_container"></canvas>
</div>
<div class="componentA-results">
... common component functionality here ...
</div>
</div>
The other two components have similar structures and functionalities, but with different CSS styling. Each component has its own CSS file.
These components are intended to be used in the following manner:
<div>
<component id="ComponentA"></component>
<component id="ComponentB"></component>
<component id="ComponentC"></component>
</div>
My approach involves renaming any component-specific CSS classes to generic names and creating individual CSS files for each component (e.g., componentA.css, componentB.css, etc).
However, I am unsure of how to ensure that each instance of the component uses the correct CSS. My initial thought was to do something like this:
<component id="ComponentA" [css-main]='???' [css-result]='???'></component>
Using @Input for styling feels messy and not ideal. Can you suggest a better way to handle this, or should I stick with separate components as best practice dictates?
Thank you.