kit-ref

API

[class] KitRefDirective

@Directive

Selector:'[kitRef]'
Export as:'ref'

Structural directive for template projecting.

№ Usage

Pass templates through content:

<app-my-component>
  <span *kitRef>1</span>
  <span *kitRef>2</span>
  <span *kitRef>3</span>
</app-my-component>

Select refs in app-my-component:

\@ContentChildren(KitRefDirective) refs: QueryList<KitRefDirective>;

Output by *ngTemplateOutlet:

<ng-container *ngFor="ref of refs">
  <ng-container *ngTemplateOutlet="ref.template">
</ng-container>

Parametrize

You can define any parameter to kitRef and then use it before rendering.

<app-my-component>
  <span *kitRef="'main'">1</span>
  <span *kitRef="'main'">2</span>
  <span *kitRef="'secondary'">3</span>
  <span *kitRef="'secondary'">4</span>
</app-my-component>

Filter refs by param:

\@ContentChildren(KitRefDirective) refs: QueryList<KitRefDirective>;
 *
get main(): KitRefDirective[] {
  return this.refs.filter(i => i.param === 'main');
}

Render filtered refs:

<ng-container *ngFor="ref of main">
  <ng-container *ngTemplateOutlet="ref.template">
</ng-container>

№ Example

Members

SignatureDescription
@Input() kitRef: T
get template(): TemplateRef<any>
get param(): T

[class] KitRefModule

@NgModule

Exports:[ KitRefDirective, ]