feat(): migrate challege 4

Author: tomalaforge

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

@@ -1,10 +1,9 @@
-import { NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ListComponent } from './list.component';
 import { PersonComponent } from './person.component';
 
 @Component({
-  imports: [NgTemplateOutlet, PersonComponent, ListComponent],
+  imports: [PersonComponent, ListComponent],
   selector: 'app-root',
   template: `
     <person [person]="person">

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

@@ -1,31 +1,30 @@
-import { CommonModule } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
-  ContentChild,
-  Input,
+  contentChild,
+  input,
   TemplateRef,
 } from '@angular/core';
 
 @Component({
   selector: 'list',
-  imports: [CommonModule],
   template: `
-    <div *ngFor="let item of list; index as i">
+    @for (item of list(); track $index) {
       <ng-container
         *ngTemplateOutlet="
-          listTemplateRef || emptyRef;
-          context: { $implicit: item, appList: item, index: i }
-        "></ng-container>
-    </div>
+          listTemplateRef() || emptyRef;
+          context: { $implicit: item, appList: item, index: $index }
+        " />
+    }
 
     <ng-template #emptyRef>No Template</ng-template>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgTemplateOutlet],
 })
 export class ListComponent<TItem extends object> {
-  @Input() list!: TItem[];
+  list = input.required<TItem[]>();
 
-  @ContentChild('listRef', { read: TemplateRef })
-  listTemplateRef!: TemplateRef<unknown>;
+  listTemplateRef = contentChild('listRef', { read: TemplateRef });
 }

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

@@ -1,27 +1,21 @@
 import { NgTemplateOutlet } from '@angular/common';
-import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
-
-interface Person {
-  name: string;
-  age: number;
-}
+import { Component, contentChild, input, TemplateRef } from '@angular/core';
 
 @Component({
   imports: [NgTemplateOutlet],
   selector: 'person',
   template: `
     <ng-container
       *ngTemplateOutlet="
-        personTemplateRef || emptyRef;
-        context: { $implicit: person.name, age: person.age }
-      "></ng-container>
+        personTemplateRef() || emptyRef;
+        context: { $implicit: person().name, age: person().age }
+      " />
 
     <ng-template #emptyRef>No Template</ng-template>
   `,
 })
 export class PersonComponent {
-  @Input() person!: Person;
+  person = input.required<{ name: string; age: number }>();
 
-  @ContentChild('#personRef', { read: TemplateRef })
-  personTemplateRef!: TemplateRef<unknown>;
+  personTemplateRef = contentChild('personRef', { read: TemplateRef });
 }