Answer:4

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

@@ -1,19 +1,27 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ListDirective } from './directives/list.directive';
+import { PersonDirective } from './directives/person.directive';
 import { ListComponent } from './list.component';
+import { Person } from './model/person';
 import { PersonComponent } from './person.component';
 
 @Component({
-  imports: [PersonComponent, ListComponent],
+  imports: [PersonComponent, ListComponent, PersonDirective, ListDirective],
   selector: 'app-root',
   template: `
     <person [person]="person">
-      <ng-template #personRef let-name let-age="age">
+      <ng-template personTemplate #personRef let-name let-age="age">
         {{ name }}: {{ age }}
       </ng-template>
     </person>
 
     <list [list]="students">
-      <ng-template #listRef let-student let-i="index">
+      <ng-template
+        listTemplateDirective
+        [listOf]="students"
+        #listRef
+        let-student
+        let-i="index">
         {{ student.name }}: {{ student.age }} - {{ i }}
       </ng-template>
     </list>
@@ -27,7 +35,7 @@ import { PersonComponent } from './person.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
-  person = {
+  person: Person = {
     name: 'toto',
     age: 3,
   };

apps/angular/4-typed-context-outlet/src/app/directives/list.directive.spec.ts

@@ -0,0 +1,8 @@
+import { ListDirective } from './list.directive';
+
+describe('ListDirective', () => {
+  it('should create an instance', () => {
+    const directive = new ListDirective();
+    expect(directive).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,42 @@
+import {
+  Directive,
+  inject,
+  Input,
+  TemplateRef,
+  ViewContainerRef,
+} from '@angular/core';
+
+interface ListStudentTemplateContext<Ctx> {
+  $implicit: Ctx;
+  appList: Ctx;
+  index: number;
+}
+
+@Directive({
+  selector: 'ng-template[listTemplateDirective]',
+})
+export class ListDirective<Ctx> {
+  private readonly tpl =
+    inject<TemplateRef<ListStudentTemplateContext<Ctx>>>(TemplateRef);
+
+  private readonly vcr = inject(ViewContainerRef);
+
+  @Input() set listOf(list: Ctx[] | readonly Ctx[] | null | undefined) {
+    const arr = (list ?? []) as Ctx[];
+    this.vcr.clear();
+    arr.forEach((item, index) => {
+      this.vcr.createEmbeddedView(this.tpl, {
+        $implicit: item,
+        appList: item,
+        index,
+      });
+    });
+  }
+
+  static ngTemplateContextGuard<Ctx>(
+    _dir: ListDirective<Ctx>,
+    ctx: unknown,
+  ): ctx is ListStudentTemplateContext<Ctx> {
+    return true;
+  }
+}

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

@@ -0,0 +1,8 @@
+import { PersonDirective } from './person.directive';
+
+describe('PersonDirective', () => {
+  it('should create an instance', () => {
+    const directive = new PersonDirective();
+    expect(directive).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,20 @@
+import { Directive, inject, TemplateRef } from '@angular/core';
+
+interface PersonTemplateContext {
+  $implicit: string;
+  age: number;
+}
+
+@Directive({
+  selector: 'ng-template[personTemplate]',
+})
+export class PersonDirective {
+  private readonly tpl = inject<TemplateRef<PersonTemplateContext>>;
+
+  static ngTemplateContextGuard(
+    _dir: PersonDirective,
+    ctx: unknown,
+  ): ctx is PersonTemplateContext {
+    return true;
+  }
+}

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

@@ -0,0 +1,4 @@
+export interface Person {
+  name: string;
+  age: number;
+}