Как динамически получить экземпляр атрибутированной директивы из элемента в коде

Самый простой способ — просто передать экземпляр div в качестве параметра функции, для этого мы используем exportAs в директиве и указываем его в ссылочной переменной шаблона.

import { Component, Directive } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Directive({
  selector: '[appBoardResize]',
  exportAs: 'appBoardResize',
  standalone: true,
})
export class AppBoardResize {
  innerProp = 'test';
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AppBoardResize],
  template: `
  @for(item of items;track $index) {
    <div class = "item"
        #directive = "appBoardResize"
        (click) = "func($event, directive)"
        appBoardResize>
        some div
    </div>
    <div class = "item"
        #directive = "appBoardResize"
        (click) = "func($event, directive)"
        appBoardResize>
        some div 2
    </div>
  }
  `,
})
export class App {
  items = new Array(10);

  func(event: Event, directive: AppBoardResize) {
    console.info(event, directive);
  }
}

bootstrapApplication(App);

Демо-версия Stackblitz

Другой способ — использовать функцию angular viewChildren для получения всех директив в компоненте, массив будет доступен только на хуке ngAfterViewInit.

Поскольку вы используете angular 17, я рекомендую использовать сигналы, но то же самое можно сделать с помощью @ViewChildren(AppBoardResize) directives!: QueryList<AppBoardResize>;

import { Component, Directive, viewChildren } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Directive({
  selector: '[appBoardResize]',
  standalone: true,
})
export class AppBoardResize {}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AppBoardResize],
  template: `
  @for(item of items;track $index) {
    <div class = "item"
        (click) = "func($event)"
        appBoardResize>
        some div
    </div>
    <div class = "item"
        (click) = "func($event)"
        appBoardResize>
        some div 2
    </div>
  }
  `,
})
export class App {
  directives = viewChildren(AppBoardResize);
  items = new Array(10);

  func(event: Event) {
    console.info(event);
  }

  ngAfterViewInit() {
    console.info(this.directives());
  }
}

bootstrapApplication(App);

Демо-версия Stackblitz