I have an Angular 8 app that I'm moving to Angular 14. The existing app has a footer that looks like this:
Here is the html:
<p-footer>
<div class="footer-wrapper">
<div class="status-wrapper">
<div class="rmq-status-wrapper {{rmqState.styleClass}}" pTooltip="{{rmqState.label}}" appendTo="body" tooltipPosition="right">
<span class="rmq-status-circle"></span>
<span class="rmq-status-title">RMQ</span>
</div>
</div>
</div>
</p-footer>
Here is what I get after modifying the html for Angular 14. The oblong status wrapper and circle defined in the .scss won't appear:
Here is the html modified for Angular 14:
<ng-template pTemplate="footer">
<div class="footer-wrapper">
<div class="status-wrapper">
<div class="rmq-status-wrapper {{rmqState.styleClass}}" pTooltip="{{rmqState.label}}" appendTo="body" tooltipPosition="right">
<span class="rmq-status-circle p-panel-header-icon"></span>
<span class="rmq-status-title">RMQ</span>
</div>
</div>
</div>
</ng-template>
All the style classes are there in the Angular 14 app, but no styling happens inside the <ng-template pTemplate="footer">.
I haven't been able to find any examples of putting style components inside of the footer like in the Angular 8 app.
Is there a way to put components defined in .scss in a <ng-template pTemplate="footer">?
Edit:
Here is the rmq-status-wrapper which is in the component's .scss file:
.rmq-status-wrapper {
border-radius: 10px;
padding-left: 4px;
padding-right: 4px;
display: flex;
height: 100%;
justify-content: space-around;
margin: 0 auto;
align-items: center;
.rmq-status-circle {
width: 12px;
height: 12px;
border-radius: 50%;
}
.rmq-status-title {
font-size: 9px;
}
&.rmq-online {
border: 1px solid #34A835;
&.no-border {
border-color: transparent;
}
.rmq-status-circle {
background-color: #34A835;
}
}
}

