I am working in an project with Angular 16, tailwindcss and daisyUI 3.0 and I am implementing some shared UI components.
When breaking some daisyUI components down into smaller components using content projection, it breaks the styling so they dont display the same as if all the HTML was in the same template together.
For example, I wanted to break down their html table into components like this:
Parent Table Component
@Component({
selector: 'table-container',
standalone: true,
imports: [CommonModule],
template: `
<table class="table w-full">
<ng-content select="[table-header]"/>
<ng-content select="[table-body]"/>
<ng-content select="[table-footer]"/>
</table>
`,
styles: [],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TableContainerComponent {}
Child Table Header Component
@Component({
selector: 'table-header',
standalone: true,
imports: [CommonModule],
template: `
<thead>
<tr>
<ng-container *ngFor="let col of headerCols">
<th [class.text-left]="col.align === 'left'"
[class.text-right]="col.align === 'right'"
[class.text-center]="col.align === 'center'"
>
{{ col.name }}
</th>
</ng-container>
</tr>
</thead>
`,
styles: [],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TableHeaderComponent {
@Input({required: true}) headerCols: ITableHeader[] = [];
}
When projecting components into each other like this the styling for the table header does not get fully applied properly. I have to instead do something like this:
<table class="table w-full">
<thead><ng-content select="[table-header]"/></thead>
<tbody><ng-content select="[table-body]"/><tbody>
<tfooter><ng-content select="[table-footer]"/></tfooter>
</table>
Has anyone worked with daisyUI (or any other UI framework) with Angular and encountered this issue with components not styling properly when using content projection?
