Scenario :- I am working on a small Angular application with only two tabs displayed on a single screen, deployed independently as static assets in an AWS S3 bucket.
Situation :- Within one of my Angular (version 12) container components, I have lengthy markup that includes duplicated code for creating a grid. The structure looks like this:
<div class="col">
<div class="row">
<div class="col">{{aStringTitle}}</div>
</div>
<div class="row">
<div class="col mt-2">
{{differentMarkupForEachColumn}}
</div>
</div>
</div>
Objective :- My goal is to display these columns using *ngFor by passing an array of the following structure:
[
{name: 'First Ng Component', component: <SmallAngularComponent>},
{name: 'Second Ng Component', component: <AnotherSmallAngularComponent>},
...... and so on up to 7-8 smaller Angular components
]
When I searched angular.io, I was unable to find a suitable example in the template documentation.
Main question :- How can I pass an array of Angular components to the template of a parent Angular component?
Preference :- Although there is an alternative solution mentioned in this answer, I specifically aim to render proper Angular components and not generic HTML elements.