All files / lib/internal component-mapper.directive.ts

100% Statements 36/36
100% Branches 3/3
100% Functions 2/2
100% Lines 36/36

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 371x 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 404x 404x 404x 404x 404x 404x 404x 404x 404x 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]',
})
export class ComponentMapperDirective<T> {
  @Input('data-gc-component-mapper')
  public component!: T;
 
  @Input('data-gc-component-mapper-key')
  public key = '';
}