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

100% Statements 36/36
100% Branches 2/2
100% Functions 1/1
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 361x 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 76x 76x 76x 76x 76x 76x 76x 76x 76x 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"
 *   [gc-component-mapper]="dummy"
 *   [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: '[gc-component-mapper]',
})
export class ComponentMapperDirective<T> {
  @Input('gc-component-mapper')
  public component!: T;
 
  @Input('gc-component-mapper-key')
  public key = '';
}