Let’s look at one way to architect Angular’s highly customizable and dynamic card list component. The goal is to make it easier to render different kinds of card lists using one single component.
Dynamic Card List Component
The component should be dynamic enough to render different designs while maintaining a common structure. The consumer should be able to use the component and provide just the config and a data source, the rest is all gonna be taken care of by our dynamic card list component.
For table-like cards, if you want to render display different data in different designs; after a point, it becomes very difficult with dedicated card lists for each of the use cases. Having a single card list component that is dynamic enough to render a wide variety of designs would make things much easier.
Features
Concepts
There are a couple of concepts that we use to build this out. We also make good use of Angular’s strong Dependency…