chore: create directives person & templateOutlet

Author: allan1989

apps/angular/4-typed-context-outlet/src/app/app.component.ts

@@ -2,13 +2,14 @@ import { NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ListComponent } from './list.component';
 import { PersonComponent } from './person.component';
+import { PersonDirective } from './person.directive';
 
 @Component({
- imports: [NgTemplateOutlet, PersonComponent, ListComponent],
+ imports: [NgTemplateOutlet, PersonComponent, ListComponent, PersonDirective],
  selector: 'app-root',
  template: `
  <person [person]="person">
- <ng-template #personRef let-name let-age="age">
+ <ng-template #personRef let-name let-age="age" person>
  {{ name }}: {{ age }}
  </ng-template>
  </person>

apps/angular/4-typed-context-outlet/src/app/person.component.ts

@@ -1,13 +1,15 @@
-import { NgTemplateOutlet } from '@angular/common';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
 import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
+import { PersonDirective } from './person.directive';
+import { AppTemplateOutletDirective } from './templateOutlet.directive';
 
-interface Person {
+export interface IPerson {
  name: string;
  age: number;
 }
 
 @Component({
- imports: [NgTemplateOutlet],
+ imports: [NgTemplateOutlet, AppTemplateOutletDirective, CommonModule],
  selector: 'person',
  template: `
  <ng-container
@@ -20,8 +22,8 @@ interface Person {
  `,
 })
 export class PersonComponent {
- @Input() person!: Person;
+ @Input() person!: IPerson;
 
- @ContentChild('#personRef', { read: TemplateRef })
+ @ContentChild(PersonDirective, { read: TemplateRef })
  personTemplateRef!: TemplateRef<unknown>;
 }

apps/angular/4-typed-context-outlet/src/app/person.directive.ts

@@ -0,0 +1,20 @@
+import { Directive } from '@angular/core';
+
+interface IPersonContext {
+ $implicit: string;
+ name: string;
+ age: number;
+}
+
+@Directive({
+ selector: 'ng-template[person]',
+ standalone: true,
+})
+export class PersonDirective {
+ static ngTemplateContextGuard(
+ dir: PersonDirective,
+ ctx: unknown,
+ ): ctx is IPersonContext {
+ return true;
+ }
+}

apps/angular/4-typed-context-outlet/src/app/templateOutlet.directive.ts

@@ -0,0 +1,58 @@
+import {
+ Directive,
+ EmbeddedViewRef,
+ Injector,
+ Input,
+ OnChanges,
+ SimpleChanges,
+ TemplateRef,
+ ViewContainerRef,
+} from '@angular/core';
+
+@Directive({
+ selector: '[ngTemplateOutlet]',
+ standalone: true,
+})
+// The directive is now waiting for a specific Type.
+export class AppTemplateOutletDirective<T> implements OnChanges {
+ private _viewRef: EmbeddedViewRef<T> | null = null;
+
+ @Input() public ngTemplateOutletContext: T | null = null;
+
+ @Input() public ngTemplateOutlet: TemplateRef<T> | null = null;
+
+ @Input() public ngTemplateOutletInjector: Injector | null = null;
+
+ constructor(private readonly _viewContainerRef: ViewContainerRef) {}
+
+ ngOnChanges(changes: SimpleChanges) {
+ if (changes['ngTemplateOutlet'] || changes['ngTemplateOutletInjector']) {
+ const viewContainerRef = this._viewContainerRef;
+
+ if (this._viewRef) {
+ viewContainerRef.remove(viewContainerRef.indexOf(this._viewRef));
+ }
+
+ if (this.ngTemplateOutlet) {
+ const {
+ ngTemplateOutlet: template,
+ ngTemplateOutletContext: context,
+ ngTemplateOutletInjector: injector,
+ } = this;
+ this._viewRef = viewContainerRef.createEmbeddedView(
+ template,
+ context,
+ injector ? { injector } : undefined,
+ ) as EmbeddedViewRef<T> | null;
+ } else {
+ this._viewRef = null;
+ }
+ } else if (
+ this._viewRef &&
+ changes['ngTemplateOutletContext'] &&
+ this.ngTemplateOutletContext
+ ) {
+ this._viewRef.context = this.ngTemplateOutletContext;
+ }
+ }
+}