In the process of working on my Angular project, I have encountered an issue with displaying components as items. Here is a snippet of the component code:
<a href="" class="list-group-item clearfix" >
<div class="container-fluid">
<div class="pull-left">
<h4 class="list-group-item-heading">
{{rec.name}}
</h4>
<p class="list=group-item-text" >{{rec.description}}</p>
</div>
<div class="center">
<img src="{{rec.ImagePath}}">
</div>
</div>
</a>
Additionally, here is a portion of the app.component (main file) code:
<app-header (featureselected)="onNavigate($event)"></app-header>
<div class="container"><div class="row">
<div class="col-md-12">
<app-recipes *ngIf="LoadedFeature ==='recipe' ;else shop"></app-recipes>
<ng-template #shop >
<app-shopping-list></app-shopping-list>
</ng-template>
</div>
</div>
</div>
The current output can be seen in this screenshot: https://i.sstatic.net/UfuZM.png
I am looking to have the image of the item displayed below the content paragraph, but I'm unsure how to achieve this. Any assistance would be appreciated.