How to add directive to elements within ng-content

Question

Here's what I'd like to do: I have a table and within one of the cells I'd like to have a options menu as a popup (implemented with Angular cdkMenu) that has multiple links as menu items in it.

The implementation of this menu is handled in table-col-actions.component.ts and the usage should look like this in the end:

...
<table-cell>
  <table-col-actions>
    <a href="https://www.yahoo.com/" target="_blank">yahoo.com</a>
    <a href="https://google.com" target="_blank">google.com</a>
  </table-col-actions>
</table-cell>
...

my table-col-actions.component.html looks like this:

<button [cdkMenuTriggerFor]="actionsMenu" class="w-full">
  <icon-options></icon-options>
</button>

<ng-template #actionsMenu>
  <div class="bg-white drop-shadow-lg" cdkMenu>
    <div class="flex flex-col">
      <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
    </div>
  </div>
</ng-template>

<ng-template #contentTemplate>
    <ng-content></ng-content>
</ng-template>

and my table-col-actions.component.ts looks like this:

import { CdkMenuModule } from '@angular/cdk/menu';
import { NgIf, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IconOptionsComponent } from '../../icons/icon-options.component';

@Component({
    standalone: true,
    selector: 'table-col-actions',
    templateUrl: 'table-col-actions.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgIf, NgTemplateOutlet, IconOptionsComponent, CdkMenuModule],
})
export class TableColActionsComponent {}

Now what I would like to do is something like this (This obvs. doesn't work, it's just the idea that's stuck in my head):

In the html template basically just add the cdkMenuItem directive for each element that got there via content projection.

...
<ng-template #actionsMenu>
  <div class="bg-white drop-shadow-lg" cdkMenu>
    <div class="flex flex-col">
      <!-- Simply add the cdkMenuItem directive here! -->
      <ng-container *ngTemplateOutlet="contentTemplate" cdkMenuItem></ng-container>
    </div>
  </div>
</ng-template>
...

How can this be done? Thanks for helping out!

How to add directive to elements within ng-content

0 Answers0