feat: add known and unknown directives

Author: efirst91

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,
   };