Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 438x 438x 438x 1x | import { Directive, Input } from '@angular/core';
/**
* Enables identification of components which were rendered from a specific item or similar identifier,
* typically when rendering via an `ngFor` and querying the components.
*
* Example:
* ```html
* <gc-dummy
* #dummy
* *ngFor="let item of items"
* [data-gc-component-mapper]="dummy"
* [data-gc-component-mapper-key]="item.key"
* ></gc-dumm>
* ```
*
* Then query the rendered components in the script via:
* ```typescript
* @ViewChildren('dummy', { read: ComponentMapperDirective })
* private dummyComponents?: QueryList<ComponentMapperDirective<DummyComponent>>;
* ```
*
* It is now possible to easily find the component which belongs to a specific item key
* via the directive's properties.
*
*/
@Directive({
selector: '[data-gc-component-mapper]',
standalone: false,
})
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters -- type required to have Angular infer it within templates and to use it again when querying for the directive
export class ComponentMapperDirective<T> {
@Input('data-gc-component-mapper')
public component!: T;
@Input('data-gc-component-mapper-key')
public key = '';
}
|