I'm looking for a solution to render dynamically some component in my angular application. So I feel the best approche is to look into https://angular.io/guide/dynamic-component-loader but this is not exactly what I'm looking for.
Just a bit of context, let's say your application permit to your users to see offers depending on their profile/eligibility. My application will do some request and at the end you can consider that we are able to build some methods like
isEligibleToFirstOffer() : boolean
isEligibleToSecondOffer() : boolean
isEligibleToThirdOffer() : boolean
Each offer is really specific and have different business logic that we can't just create a generic component with inputs, I would like to separate each offer in his own component to isolate as much as possible the logic by type of offers.
What I want to achieve is to build a OffersWrapper component which take as input an array of component classes and render it in a main container.
This array would be build with the previous logic, something like:
const componentsToRender = [
...(isEligibleToFirstOffer() ? [FirstOfferComponent] : []),
...(isEligibleToSecondOffer() ? [SecondOfferComponent] : []),
...(isEligibleToThirdOffer() ? [ThirdOfferComponent] : [])
]
Now the question is, what is the best approach to give this array to a generic component and make them render dynamically ?
We could also improve a bit the componentsToRender to be able to inject also data, but this is not the main issue of this question, anyway it could be interesting to give a full answer for futur dev who want to take a look at this solution.
const componentsToRender: {component: any, data: any}[]
at the end, the solution would give us the ability to write this kind of code:
<html>
<body>
<main>
<component-wrapper [components]=componentsToRender></component-wrapper>
<router-outlet></router-outlet>
</main>
</body>
</html>
Thanks!
from Dynamic loader component with multiple component render
No comments:
Post a Comment