Angular Primeng ng-template pTemplate="footer" won't allow style components in the footer

Viewed 22

I have an Angular 8 app that I'm moving to Angular 14. The existing app has a footer that looks like this:

Angular 8 p-footer

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:

ng-tamplate footer Angular 14

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;
    }
  }
}
0 Answers
Related