[FEATURE] Make it Angular friendly. UI breaks when using inside Angular components

[yaplex]

Issue when using the theme with Angular

When using Angular, I put the top navigation, sidebar navigation, and footer in different Angular components. Angular creates a new HTML tag behind the scenes, which breaks the layout. I managed to fix it using "display: contents" on the component, but it would be great if that just works without any additional fixes.

Steps to reproduce For example, the code below is what I have in my app.component.html; inside each component is HTML from Admin LTE.

<div class="app-wrapper">
    <app-top-navigation style="display:contents"></app-top-navigation>
    <app-sidebar-navigation style="display:contents"></app-sidebar-navigation>
    <app-footer style="display:contents"></app-footer>
</div>

When rendering the components, Angular add an extra HTML like below:

<app-footer style="display: contents;" _nghost-ng-c1263011948="">
   <footer _ngcontent-ng-c1263011948="" class="app-footer">
      <div _ngcontent-ng-c1263011948="" class="float-end d-none d-sm-inline">Anything you want</div>
      <strong _ngcontent-ng-c1263011948=""> Copyright © 2014-2024&nbsp; <a _ngcontent-ng-c1263011948="" href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>. </strong> All rights reserved. 
   </footer>
</app-footer>

Without me adding "style=display:contents" the footer breaks