In this lesson we will make our application even more dynamic, generating and populating the layout starting from an object
Our goal is populate the UI using a JSON configuration object.
In a real-world project let's imagine that this data could come from a REST API. Anyway to avoid setting up a backend we will define this object directly in AppComponent.
We define the configuration object in a signal and, as you can see, it contains all the information we want to display:
src/app.component.ts (class)
Hero & Stats
First we update the Hero and Stats instances to get the input values from the data() signal:
src/app.component.ts (template)
Card
We have to display 4 Card components so we can iterate the data().cards array and use a @for block to display all of them:
src/app.component.ts (template)
Footer
The Footer component works just like the other components:
