0

I have a generic table component and I want to make the row hoverable by binding class using ngClass to a ng-container. However I an error.

The code:

<ng-container *ngFor="let row of manager.rows" [ngClass]="manager.config.onRowSelect ? 'row-selectable' : ''">
                    <ng-container *ngFor="let cell of row.displayData">
                        <div (click)="row.onClick(row.item)" class="cell-divider">
                            <!-- Image -->
                            <div *ngIf="cell.isImage" class="cell" style="display: flex; align-items: center; padding: 3px;">
                                <img [src]="cell.data">
                            </div>
                            <!-- Data -->
                            <div *ngIf="!cell.isImage" class="cell">
                                {{cell.data}}
                            </div>
                        </div>
                    </ng-container>
                    <!-- Column Actions -->
                    <div *ngIf="manager.config.rowActions && manager.config.rowActions.length > 0" style="display: flex; gap: 2px; align-items: center;" class="cell-divider">
                        <div *ngFor="let action of row.actions" >
                            <ng-container>
                                <app-ui-icon-button (clicked)="action.action(row.item)" [iconSize]="20" [tooltip]="action.tooltip" [backgroundTransparent]="true" [iconColor]="action.color" [icon]="action.icon"></app-ui-icon-button>
                            </ng-container>
                        </div>
                    </div>
</ng-container>

The error I get:

enter image description here

If I remove the ngClass part from the 1st ng-container then I don't get the error.

Solutions that won't work:

  • Replace the ng-container with a div, because above the ng-container is a table layout and it will ruin the layout.
  • Add a div between the 1st ng-container and the 1st div, because this will also ruin the layout.

Why can't I bind ngClass to ngContainer and how would I solve my issue?

Franco
  • 441
  • 3
  • 18
  • 2
    you can't apply `ngClass` to `ng-container` see this SO post for more information https://stackoverflow.com/a/61299689/5621827 Create a stackblitz of your problem so you can ask for alternative solutions – jitender Mar 16 '23 at 07:00
  • I googled and used ChatGPT and no where they said I can't use it together. Very weird. Thank you @jitender. If you make an answer I can mark your answer as the preferred answer. – Franco Mar 16 '23 at 07:09

1 Answers1

0

You can use this method, create template

  <ng-template #customTemplate>
      <div class="class-name">
        Bla Bla Bla!
      </div>
   </ng-template>

And call it within container

  <ng-container [ngTemplateOutlet]="customTemplate"></ng-container>
Mustafa Omran
  • 354
  • 5
  • 7