refactor(docs-infra): remove component suffix from learn-angular tutorial (#61254)

this removes the component suffix from the learn-angular tutorials

PR Close #61254

adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/answer/src/app/app.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {CommentsComponent} from './comments.component';
+import {Comments} from './comments';
 
 @Component({
   selector: 'app-root',
@@ -62,6 +62,6 @@ import {CommentsComponent} from './comments.component';
       }
     </div>
   `,
-  imports: [CommentsComponent],
+  imports: [Comments],
 })
 export class App {}

adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/answer/src/app/comments.ts

@@ -10,4 +10,4 @@ import {Component} from '@angular/core';
     </ul>
   `,
 })
-export class CommentsComponent {}
+export class Comments {}

adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/config.json

@@ -1,5 +1,5 @@
 {
-  "openFiles": ["src/app/app.ts", "src/app/comments.component.ts"],
+  "openFiles": ["src/app/app.ts", "src/app/comments.ts"],
   "title": "Deferrable views",
   "type": "editor"
 }

adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/src/app/app.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {CommentsComponent} from './comments.component';
+import {Comments} from './comments';
 
 @Component({
   selector: 'app-root',
@@ -10,6 +10,6 @@ import {CommentsComponent} from './comments.component';
       <comments />
     </div>
   `,
-  imports: [CommentsComponent],
+  imports: [Comments],
 })
 export class App {}

adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/src/app/comments.ts

@@ -10,4 +10,4 @@ import {Component} from '@angular/core';
     </ul>
   `,
 })
-export class CommentsComponent {}
+export class Comments {}

adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/answer/src/app/app.ts

@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {UserComponent} from './user.component';
+import {User} from './user';
 
 @Component({
   selector: 'app-root',
   template: `
     <app-user />
   `,
-  imports: [UserComponent],
+  imports: [User],
 })
 export class App {}

adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/answer/src/app/user.ts

@@ -19,7 +19,7 @@ import {NgOptimizedImage} from '@angular/common';
   `,
   imports: [NgOptimizedImage],
 })
-export class UserComponent {
+export class User {
   logoUrl = '/assets/logo.svg';
   logoAlt = 'Angular logo';
   username = 'youngTech';

adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/config.json

@@ -1,5 +1,5 @@
 {
-  "openFiles": ["src/app/user.component.ts"],
+  "openFiles": ["src/app/user.ts"],
   "title": "Optimizing images",
   "type": "editor"
 }

adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/src/app/app.ts

@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {UserComponent} from './user.component';
+import {User} from './user';
 
 @Component({
   selector: 'app-root',
   template: `
     <app-user />
   `,
-  imports: [UserComponent],
+  imports: [User],
 })
 export class App {}

adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/src/app/user.ts

@@ -18,7 +18,7 @@ import {Component} from '@angular/core';
   `,
   imports: [],
 })
-export class UserComponent {
+export class User {
   logoUrl = '/assets/logo.svg';
   logoAlt = 'Angular logo';
   username = 'youngTech';

adev/src/content/tutorials/learn-angular/steps/12-enable-routing/answer/src/app/home/home.ts

@@ -6,4 +6,4 @@ import {Component} from '@angular/core';
     <div>Home Page</div>
   `,
 })
-export class HomeComponent {}
+export class Home {}

adev/src/content/tutorials/learn-angular/steps/12-enable-routing/answer/src/app/user/user.ts

@@ -6,6 +6,6 @@ import {Component} from '@angular/core';
     <div>Username: {{ username }}</div>
   `,
 })
-export class UserComponent {
+export class User {
   username = 'youngTech';
 }

adev/src/content/tutorials/learn-angular/steps/12-enable-routing/src/app/home/home.ts

@@ -6,4 +6,4 @@ import {Component} from '@angular/core';
     <div>Home Page</div>
   `,
 })
-export class HomeComponent {}
+export class Home {}

adev/src/content/tutorials/learn-angular/steps/12-enable-routing/src/app/user/user.ts

@@ -6,6 +6,6 @@ import {Component} from '@angular/core';
     <div>Username: {{ username }}</div>
   `,
 })
-export class UserComponent {
+export class User {
   username = 'youngTech';
 }

adev/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md

@@ -22,19 +22,19 @@ To define a route, add a route object to the `routes` array in `app.routes.ts` t
 ```ts
 import {Routes} from '@angular/router';
 
-import {HomeComponent} from './home/home.component';
+import {Home} from './home/home';
 
 export const routes: Routes = [
   {
     path: '',
-    component: HomeComponent,
+    component: Home,
   },
 ];
 ```
 
-The code above is an example of how `HomeComponent` can be added as a route. Now go ahead and implement this along with the `UserComponent` in the playground.
+The code above is an example of how `Home` can be added as a route. Now go ahead and implement this along with the `User` in the playground.
 
-Use `'user'` for the path of `UserComponent`.
+Use `'user'` for the path of `User`.
 
 </docs-step>
 
@@ -47,13 +47,13 @@ In `app.routes.ts`, add the `title` property to the default route (`path: ''`) a
 <docs-code language="ts" highlight="[8]">
 import {Routes} from '@angular/router';
 
-import {HomeComponent} from './home/home.component';
+import {Home} from './home/home';
 
 export const routes: Routes = [
 {
 path: '',
 title: 'App Home Page',
-component: HomeComponent,
+component: Home,
 },
 ];
 </docs-code>

adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/app.routes.ts

@@ -1,17 +1,17 @@
 import {Routes} from '@angular/router';
 
-import {HomeComponent} from './home/home.component';
-import {UserComponent} from './user/user.component';
+import {Home} from './home/home';
+import {User} from './user/user';
 
 export const routes: Routes = [
   {
     path: '',
     title: 'App Home Page',
-    component: HomeComponent,
+    component: Home,
   },
   {
     path: 'user',
     title: 'App User Page',
-    component: UserComponent,
+    component: User,
   },
 ];

adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/home/home.ts

@@ -6,4 +6,4 @@ import {Component} from '@angular/core';
     <div>Home Page</div>
   `,
 })
-export class HomeComponent {}
+export class Home {}

adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/user/user.ts

@@ -6,6 +6,6 @@ import {Component} from '@angular/core';
     <div>Username: {{ username }}</div>
   `,
 })
-export class UserComponent {
+export class User {
   username = 'youngTech';
 }

adev/src/content/tutorials/learn-angular/steps/13-define-a-route/config.json

@@ -1,5 +1,5 @@
 {
-  "openFiles": ["src/app/app.routes.ts", "src/app/home/home.component.ts"],
+  "openFiles": ["src/app/app.routes.ts", "src/app/home/home.ts"],
   "title": "Define a route",
   "type": "editor"
 }

adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/app.routes.ts

@@ -1,5 +1,5 @@
 import {Routes} from '@angular/router';
-import {HomeComponent} from './home/home.component';
-import {UserComponent} from './user/user.component';
+import {Home} from './home/home';
+import {User} from './user/user';
 
 export const routes: Routes = [];

adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/home/home.ts

@@ -6,4 +6,4 @@ import {Component} from '@angular/core';
     <div>Home Page</div>
   `,
 })
-export class HomeComponent {}
+export class Home {}

adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/user/user.ts

@@ -6,6 +6,6 @@ import {Component} from '@angular/core';
     <div>Username: {{ username }}</div>
   `,
 })
-export class UserComponent {
+export class User {
   username = 'youngTech';
 }

adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/app.routes.ts

@@ -1,17 +1,17 @@
 import {Routes} from '@angular/router';
 
-import {HomeComponent} from './home/home.component';
-import {UserComponent} from './user/user.component';
+import {Home} from './home/home';
+import {User} from './user/user';
 
 export const routes: Routes = [
   {
     path: '',
     title: 'App Home Page',
-    component: HomeComponent,
+    component: Home,
   },
   {
     path: 'user',
     title: 'App User Page',
-    component: UserComponent,
+    component: User,
   },
 ];

adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/home/home.component.ts

@@ -1,9 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'app-home',
-  template: `
-    <div>Home Page</div>
-  `,
-})
-export class HomeComponent {}

adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/home/home.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  template: `
+    <div>Home Page</div>
+  `,
+})
+export class Home {}

adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/user/user.component.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'app-user',
-  template: `
-    <div>Username: {{ username }}</div>
-  `,
-})
-export class UserComponent {
-  username = 'youngTech';
-}

adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/user/user.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-user',
+  template: `
+    <div>Username: {{ username }}</div>
+  `,
+})
+export class User {
+  username = 'youngTech';
+}

adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/app.routes.ts

@@ -1,17 +1,17 @@
 import {Routes} from '@angular/router';
 
-import {HomeComponent} from './home/home.component';
-import {UserComponent} from './user/user.component';
+import {Home} from './home/home';
+import {User} from './user/user';
 
 export const routes: Routes = [
   {
     path: '',
     title: 'App Home Page',
-    component: HomeComponent,
+    component: Home,
   },
   {
     path: 'user',
     title: 'App User Page',
-    component: UserComponent,
+    component: User,
   },
 ];

adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/home/home.component.ts

@@ -1,9 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'app-home',
-  template: `
-    <div>Home Page</div>
-  `,
-})
-export class HomeComponent {}

adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/home/home.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  template: `
+    <div>Home Page</div>
+  `,
+})
+export class Home {}

adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/user/user.component.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'app-user',
-  template: `
-    <div>Username: {{ username }}</div>
-  `,
-})
-export class UserComponent {
-  username = 'youngTech';
-}

adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/user/user.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-user',
+  template: `
+    <div>Username: {{ username }}</div>
+  `,
+})
+export class User {
+  username = 'youngTech';
+}

adev/src/content/tutorials/learn-angular/steps/15-forms/README.md

@@ -14,7 +14,7 @@ In this activity, you'll learn how to set up a form using a template-driven appr
 
 <docs-step title="Create an input field">
 
-In `user.component.ts`, update the template by adding a text input with the `id` set to `framework`, type set to `text`.
+In `user.ts`, update the template by adding a text input with the `id` set to `framework`, type set to `text`.
 
 ```angular-html
 <label for="framework">
@@ -29,7 +29,7 @@ In `user.component.ts`, update the template by adding a text input with the `id`
 
 For this form to use Angular features that enable data binding to forms, you'll need to import the `FormsModule`.
 
-Import the `FormsModule` from `@angular/forms` and add it to the `imports` array of the `UserComponent`.
+Import the `FormsModule` from `@angular/forms` and add it to the `imports` array of the `User`.
 
 <docs-code language="ts" highlight="[2, 7]">
 import {Component} from '@angular/core';
@@ -39,7 +39,7 @@ import {FormsModule} from '@angular/forms';
 ...
 imports: [FormsModule],
 })
-export class UserComponent {}
+export class User {}
 </docs-code>
 
 </docs-step>

adev/src/content/tutorials/learn-angular/steps/15-forms/answer/src/app/app.ts

@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {UserComponent} from './user.component';
+import {User} from './user';
 
 @Component({
   selector: 'app-root',
   template: `
     <app-user />
   `,
-  imports: [UserComponent],
+  imports: [User],
 })
 export class App {}

adev/src/content/tutorials/learn-angular/steps/15-forms/answer/src/app/user.ts

@@ -13,7 +13,7 @@ import {FormsModule} from '@angular/forms';
   `,
   imports: [FormsModule],
 })
-export class UserComponent {
+export class User {
   favoriteFramework = '';
   username = 'youngTech';
 }

adev/src/content/tutorials/learn-angular/steps/15-forms/config.json

@@ -1,5 +1,5 @@
 {
-  "openFiles": ["src/app/user.component.ts"],
+  "openFiles": ["src/app/user.ts"],
   "title": "Forms",
   "type": "editor"
 }

adev/src/content/tutorials/learn-angular/steps/15-forms/src/app/app.ts

@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {UserComponent} from './user.component';
+import {User} from './user';
 
 @Component({
   selector: 'app-root',
   template: `
     <app-user />
   `,
-  imports: [UserComponent],
+  imports: [User],
 })
 export class App {}

adev/src/content/tutorials/learn-angular/steps/15-forms/src/app/user.ts

@@ -9,7 +9,7 @@ import {Component} from '@angular/core';
   `,
   imports: [],
 })
-export class UserComponent {
+export class User {
   username = 'youngTech';
   favoriteFramework = '';
 }

adev/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md

@@ -26,7 +26,7 @@ To display the input value in a template, you can use the interpolation syntax `
     </label>
   `,
 })
-export class UserComponent {
+export class User {
   favoriteFramework = '';
 }
 </docs-code>
@@ -47,7 +47,7 @@ When you need to reference the input field value in the component class, you can
   `,
   ...
 })
-export class UserComponent {
+export class User {
   favoriteFramework = '';
   ...
 

adev/src/content/tutorials/learn-angular/steps/16-form-control-values/answer/src/app/app.ts

@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {UserComponent} from './user.component';
+import {User} from './user';
 
 @Component({
   selector: 'app-root',
   template: `
     <app-user />
   `,
-  imports: [UserComponent],
+  imports: [User],
 })
 export class App {}

adev/src/content/tutorials/learn-angular/steps/16-form-control-values/answer/src/app/user.ts

@@ -14,7 +14,7 @@ import {FormsModule} from '@angular/forms';
   `,
   imports: [FormsModule],
 })
-export class UserComponent {
+export class User {
   favoriteFramework = '';
   username = 'youngTech';
 

adev/src/content/tutorials/learn-angular/steps/16-form-control-values/config.json

@@ -1,5 +1,5 @@
 {
-  "openFiles": ["src/app/user.component.ts"],
+  "openFiles": ["src/app/user.ts"],
   "title": "Getting form control values",
   "type": "editor"
 }

adev/src/content/tutorials/learn-angular/steps/16-form-control-values/src/app/app.ts

@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {UserComponent} from './user.component';
+import {User} from './user';
 
 @Component({
   selector: 'app-root',
   template: `
     <app-user />
   `,
-  imports: [UserComponent],
+  imports: [User],
 })
 export class App {}

adev/src/content/tutorials/learn-angular/steps/16-form-control-values/src/app/user.ts

@@ -14,7 +14,7 @@ import {FormsModule} from '@angular/forms';
   `,
   imports: [FormsModule],
 })
-export class UserComponent {
+export class User {
   favoriteFramework = '';
   username = 'youngTech';
 

adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md

@@ -12,7 +12,7 @@ It is often helpful to initialize class properties with values provided by the D
 
 <docs-code language="ts" highlight="[3]">
 @Component({...})
-class PetCareDashboardComponent {
+class PetCareDashboard {
     petRosterService = inject(PetRosterService);
 }
 </docs-code>

adev/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.md

@@ -14,7 +14,7 @@ To inject a service or some other injectable resource into your component use th
 
 <docs-code language="ts" highlight="[3]">
 @Component({...})
-class PetCarDashboardComponent {
+class PetCarDashboard {
     constructor(private petCareService: PetCareService) {
         ...
     }

adev/src/content/tutorials/learn-angular/steps/3-composing-components/README.md

@@ -10,16 +10,16 @@ In this activity, you'll learn how to compose components.
 
 <hr/>
 
-In this example, there are two components `UserComponent` and `App`.
+In this example, there are two components `User` and `App`.
 
 <docs-workflow>
 
-<docs-step title="Add a reference to `UserComponent`">
-Update the `App` template to include a reference to the `UserComponent` which uses the selector `app-user`. Be sure to add `UserComponent` to the imports array of `App`, this makes it available for use in the `App` template.
+<docs-step title="Add a reference to `User`">
+Update the `App` template to include a reference to the `User` which uses the selector `app-user`. Be sure to add `User` to the imports array of `App`, this makes it available for use in the `App` template.
 
 ```ts
 template: `<app-user />`,
-imports: [UserComponent]
+imports: [User]
 ```
 
 The component now displays the message `Username: youngTech`. You can update the template code to include more markup.

adev/src/content/tutorials/learn-angular/steps/3-composing-components/answer/src/app/app.ts

@@ -6,7 +6,7 @@ import {Component} from '@angular/core';
     Username: {{ username }}
   `,
 })
-export class UserComponent {
+export class User {
   username = 'youngTech';
 }
 
@@ -17,6 +17,6 @@ export class UserComponent {
       <app-user />
     </section>
   `,
-  imports: [UserComponent],
+  imports: [User],
 })
 export class App {}

adev/src/content/tutorials/learn-angular/steps/3-composing-components/src/app/app.ts

@@ -6,7 +6,7 @@ import {Component} from '@angular/core';
     Username: {{ username }}
   `,
 })
-export class UserComponent {
+export class User {
   username = 'youngTech';
 }
 

adev/src/content/tutorials/learn-angular/steps/8-input/README.md

@@ -12,8 +12,8 @@ In this activity, you'll learn how to use the `@Input` decorator to send informa
 
 To create an `Input` property, add the `@Input` decorator to a property of a component class:
 
-<docs-code header="user.component.ts" language="ts">
-class UserComponent {
+<docs-code header="user.ts" language="ts">
+class User {
   @Input() occupation = '';
 }
 </docs-code>
@@ -28,9 +28,9 @@ When you are ready to pass in a value through an `Input`, values can be set in t
 class App {}
 </docs-code>
 
-Make sure you bind the property `occupation` in your `UserComponent`.
+Make sure you bind the property `occupation` in your `User`.
 
-<docs-code header="user.component.ts" language="angular-ts">
+<docs-code header="user.ts" language="angular-ts">
 @Component({
   ...
   template: `<p>The user's occupation is {{occupation}}</p>`
@@ -40,7 +40,7 @@ Make sure you bind the property `occupation` in your `UserComponent`.
 <docs-workflow>
 
 <docs-step title="Define an `@Input` property">
-Update the code in `user.component.ts` to define an `Input` property on the `UserComponent` called `name`. For now, set the initial value to `empty string`. Be sure to update the template to interpolate the `name` property at the end of the sentence.
+Update the code in `user.ts` to define an `Input` property on the `User` called `name`. For now, set the initial value to `empty string`. Be sure to update the template to interpolate the `name` property at the end of the sentence.
 </docs-step>
 
 <docs-step title="Pass a value to the `@Input` property">

adev/src/content/tutorials/learn-angular/steps/8-input/answer/src/app/app.ts

@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {UserComponent} from './user.component';
+import {User} from './user';
 
 @Component({
   selector: 'app-root',
   template: `
     <app-user name="Simran" />
   `,
-  imports: [UserComponent],
+  imports: [User],
 })
 export class App {}

adev/src/content/tutorials/learn-angular/steps/8-input/answer/src/app/user.ts

@@ -6,6 +6,6 @@ import {Component, Input} from '@angular/core';
     <p>The user's name is {{ name }}</p>
   `,
 })
-export class UserComponent {
+export class User {
   @Input() name = '';
 }

adev/src/content/tutorials/learn-angular/steps/8-input/config.json

@@ -1,5 +1,5 @@
 {
-  "openFiles": ["src/app/user.component.ts", "src/app/app.ts"],
+  "openFiles": ["src/app/user.ts", "src/app/app.ts"],
   "title": "Communicating with @Input",
   "type": "editor"
 }

adev/src/content/tutorials/learn-angular/steps/8-input/src/app/app.ts

@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {UserComponent} from './user.component';
+import {User} from './user';
 
 @Component({
   selector: 'app-root',
   template: `
     <app-user />
   `,
-  imports: [UserComponent],
+  imports: [User],
 })
 export class App {}

adev/src/content/tutorials/learn-angular/steps/8-input/src/app/user.ts

@@ -6,4 +6,4 @@ import {Component, Input} from '@angular/core';
     <p>The user's name is</p>
   `,
 })
-export class UserComponent {}
+export class User {}

adev/src/content/tutorials/learn-angular/steps/9-output/README.md

@@ -12,17 +12,17 @@ In this activity, you'll learn how to use the `@Output` decorator and `EventEmit
 
 To create the communication path from child to parent components, use the `@Output` decorator on a class property and assign it a value of type `EventEmitter`:
 
-<docs-code header="child.component.ts" language="ts">
+<docs-code header="child.ts" language="ts">
 @Component({...})
-class ChildComponent {
+class Child {
     @Output() incrementCountEvent = new EventEmitter<number>();
 }
 </docs-code>
 
 Now the component can generate events that can be listened to by the parent component. Trigger events by calling the `emit` method:
 
-<docs-code header="child.component.ts" language="ts">
-class ChildComponent {
+<docs-code header="child.ts" language="ts">
+class Child {
     ...
 
     onClick() {
@@ -40,13 +40,13 @@ Alright, your turn to give this a try. Complete the code by following these task
 <docs-workflow>
 
 <docs-step title="Add an `@Output` property">
-Update `child.component.ts` by adding an output property called `addItemEvent`, be sure to set the EventEmitter type to be `string`.
+Update `child.ts` by adding an output property called `addItemEvent`, be sure to set the EventEmitter type to be `string`.
 </docs-step>
 
 <docs-step title="Complete `addItem` method">
-In `child.component.ts` update the `addItem` method; use the following code as the logic:
+In `child.ts` update the `addItem` method; use the following code as the logic:
 
-<docs-code header="child.component.ts" highlight="[2]" language="ts">
+<docs-code header="child.ts" highlight="[2]" language="ts">
 addItem() {
   this.addItemEvent.emit('🐢');
 }

adev/src/content/tutorials/learn-angular/steps/9-output/answer/src/app/app.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {ChildComponent} from './child.component';
+import {Child} from './child';
 
 @Component({
   selector: 'app-root',
@@ -7,7 +7,7 @@ import {ChildComponent} from './child.component';
     <app-child (addItemEvent)="addItem($event)" />
     <p>🐢 all the way down {{ items.length }}</p>
   `,
-  imports: [ChildComponent],
+  imports: [Child],
 })
 export class App {
   items = new Array();

adev/src/content/tutorials/learn-angular/steps/9-output/answer/src/app/child.ts

@@ -7,7 +7,7 @@ import {Component, Output, EventEmitter} from '@angular/core';
     <button class="btn" (click)="addItem()">Add Item</button>
   `,
 })
-export class ChildComponent {
+export class Child {
   @Output() addItemEvent = new EventEmitter<string>();
 
   addItem() {

adev/src/content/tutorials/learn-angular/steps/9-output/config.json

@@ -1,5 +1,5 @@
 {
-  "openFiles": ["src/app/child.component.ts", "src/app/app.ts"],
+  "openFiles": ["src/app/child.ts", "src/app/app.ts"],
   "title": "Communicating with @Output",
   "type": "editor"
 }

adev/src/content/tutorials/learn-angular/steps/9-output/src/app/app.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {ChildComponent} from './child.component';
+import {Child} from './child';
 
 @Component({
   selector: 'app-root',
@@ -7,7 +7,7 @@ import {ChildComponent} from './child.component';
     <app-child />
     <p>🐢 all the way down {{ items.length }}</p>
   `,
-  imports: [ChildComponent],
+  imports: [Child],
 })
 export class App {
   items = new Array();

adev/src/content/tutorials/learn-angular/steps/9-output/src/app/child.ts

@@ -7,6 +7,6 @@ import {Component, Output, EventEmitter} from '@angular/core';
     <button class="btn" (click)="addItem()">Add Item</button>
   `,
 })
-export class ChildComponent {
+export class Child {
   addItem() {}
 }