use standalone for components

Author: markgoho

apps/example-app/src/app/app.module.ts

@@ -28,8 +28,8 @@ function reducerItems() {
 }
 
 @NgModule({
-  declarations: [
-    AppComponent,
+  declarations: [AppComponent],
+  imports: [
     SingleComponent,
     NestedButtonComponent,
     NestedValueComponent,
@@ -43,8 +43,6 @@ function reducerItems() {
     RootComponent,
     DetailComponent,
     HiddenDetailComponent,
-  ],
-  imports: [
     BrowserModule,
     ReactiveFormsModule,
     BrowserAnimationsModule,

apps/example-app/src/app/examples/00-single-component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-fixture',
+  standalone: true,
   template: `
     <button (click)="value = value - 1">Decrement</button>
     <span data-testid="value">{{ value }}</span>

apps/example-app/src/app/examples/01-nested-component.spec.ts

@@ -1,13 +1,11 @@
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
-import { NestedButtonComponent, NestedValueComponent, NestedContainerComponent } from './01-nested-component';
+import { NestedContainerComponent } from './01-nested-component';
 
 test('renders the current value and can increment and decrement', async () => {
   const user = userEvent.setup();
-  await render(NestedContainerComponent, {
-    declarations: [NestedButtonComponent, NestedValueComponent],
-  });
+  await render(NestedContainerComponent);
 
   const incrementControl = screen.getByRole('button', { name: /increment/i });
   const decrementControl = screen.getByRole('button', { name: /decrement/i });

apps/example-app/src/app/examples/01-nested-component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
+  standalone: true,
   selector: 'app-button',
   template: ' <button (click)="raise.emit()">{{ name }}</button> ',
 })
@@ -10,6 +11,7 @@ export class NestedButtonComponent {
 }
 
 @Component({
+  standalone: true,
   selector: 'app-value',
   template: ' <span data-testid="value">{{ value }}</span> ',
 })
@@ -18,12 +20,14 @@ export class NestedValueComponent {
 }
 
 @Component({
+  standalone: true,
   selector: 'app-fixture',
   template: `
-    <app-button (raise)="value = value - 1" name="Decrement"></app-button>
-    <app-value [value]="value"></app-value>
-    <app-button (raise)="value = value + 1" name="Increment"></app-button>
+    <app-button (raise)="value = value - 1" name="Decrement" />
+    <app-value [value]="value" />
+    <app-button (raise)="value = value + 1" name="Increment" />
   `,
+  imports: [NestedButtonComponent, NestedValueComponent],
 })
 export class NestedContainerComponent {
   value = 0;

apps/example-app/src/app/examples/02-input-output.spec.ts

@@ -38,8 +38,8 @@ test('is possible to set input and listen for output with the template syntax',
   const user = userEvent.setup();
   const sendSpy = jest.fn();
 
-  await render('<app-fixture [value]="47" (sendValue)="sendValue($event)" (clicked)="clicked()"></app-fixture>', {
-    declarations: [InputOutputComponent],
+  await render('<app-fixture [value]="47" (sendValue)="sendValue($event)" />', {
+    imports: [InputOutputComponent],
     componentProperties: {
       sendValue: sendSpy,
     },

apps/example-app/src/app/examples/02-input-output.ts

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
+  standalone: true,
   selector: 'app-fixture',
   template: `
     <button (click)="value = value - 1">Decrement</button>

apps/example-app/src/app/examples/03-forms.ts

@@ -1,8 +1,11 @@
+import { NgForOf, NgIf } from '@angular/common';
 import { Component } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
 @Component({
+  standalone: true,
   selector: 'app-fixture',
+  imports: [ReactiveFormsModule, NgForOf, NgIf],
   template: `
     <form [formGroup]="form" name="form">
       <div>

apps/example-app/src/app/examples/04-forms-with-material.spec.ts

@@ -1,15 +1,12 @@
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
-import { MaterialModule } from '../material.module';
 import { MaterialFormsComponent } from './04-forms-with-material';
 
 test('is possible to fill in a form and verify error messages (with the help of jest-dom https://testing-library.com/docs/ecosystem-jest-dom)', async () => {
   const user = userEvent.setup();
 
-  const { fixture } = await render(MaterialFormsComponent, {
-    imports: [MaterialModule],
-  });
+  const { fixture } = await render(MaterialFormsComponent);
 
   const nameControl = screen.getByLabelText(/name/i);
   const scoreControl = screen.getByRole('spinbutton', { name: /score/i });
@@ -69,9 +66,7 @@ test('is possible to fill in a form and verify error messages (with the help of
 test('set and show pre-set form values', async () => {
   const user = userEvent.setup();
 
-  const { fixture, detectChanges } = await render(MaterialFormsComponent, {
-    imports: [MaterialModule],
-  });
+  const { fixture, detectChanges } = await render(MaterialFormsComponent);
 
   fixture.componentInstance.form.setValue({
     name: 'Max',

apps/example-app/src/app/examples/04-forms-with-material.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MaterialModule } from '../material.module';
+import { NgForOf, NgIf } from '@angular/common';
 
 @Component({
+  standalone: true,
+  imports: [MaterialModule, ReactiveFormsModule, NgForOf, NgIf],
   selector: 'app-fixture',
   template: `
     <form [formGroup]="form" name="form">

apps/example-app/src/app/examples/05-component-provider.ts

@@ -20,6 +20,7 @@ export class CounterService {
 }
 
 @Component({
+  standalone: true,
   selector: 'app-fixture',
   template: `
     <button (click)="counter.decrement()">Decrement</button>