https://i.sstatic.net/WVgwk.jpgI have a simple Angular application where hard-coded data is being rendered on the webpage in a basic format. However, when I try to apply Bootstrap styles and classes, nothing is appearing on the page. Can someone please help me correct the code below?
This is event.component.html:
<div class="media">
<h3 class="h3-responsive font-weight-bold mr-3">{{ value.time }}</h3>
<div class="media-body mb-3 ">
<mdb-badge danger="true" class="text-center float-right">-</mdb-badge>
<h6 class="mt-0 font-weight-bold">{{ value.subject }}</h6>
<hr class="hr-bold mb-0 my-2" />
<p class="mb-0" *ngIf="value.location">
<mdb-icon fas icon="location-arrow"></mdb-icon>
{{ value.location }}
</p>
</div>
</div>
<p class="p-3 blue-grey lighten-5 blue-grey lighten-5" *ngIf="value.description">
{{ value.description }}
</p>
This is app.component.html:
<div class="container">
<div class="row">
<div class="col-md-9">
<div *ngFor="let event of events">
<app-event [value]="event"></app-event>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>