solve: duplication layout code

apps/challenges/src/app/duplication-layout-code/filter-a/filter-a.component.ts

@@ -1,31 +1,21 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
+import { FilterLayoutComponent } from '../filter-layout.component';
+import { FilterBaseDirective } from '../filter-base';
 
 @Component({
   selector: 'angular-challenges-filter-a',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule],
   template: `
-    <section>
-      <div>
-        <h2>Filter A</h2>
-      </div>
-
-      <div>
-        <p>Find something by filter A</p>
-        <input [formControl]="filterA" />
-      </div>
-
-      <button (click)="addFilterA()">Apply Filter</button>
-    </section>
+    <angular-challenges-filter-layout
+      [title]="title()"
+      [descriptions]="descriptions()"
+      (filterValue)="filterValue.emit($event)"
+    />
   `,
+  imports: [CommonModule, FilterLayoutComponent],
 })
-export class FilterAComponent {
-  filterA = new UntypedFormControl();
-  @Output() filterValue = new EventEmitter();
-
-  addFilterA(): void {
-    this.filterValue.emit(this.filterA.value);
-  }
+export class FilterAComponent extends FilterBaseDirective {
+  title = signal('Filter A');
+  descriptions = signal(['Find something by filter A']);
 }

apps/challenges/src/app/duplication-layout-code/filter-b/filter-b.component.ts

@@ -1,31 +1,29 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
+import { FilterLayoutComponent } from '../filter-layout.component';
+import { FilterBaseDirective } from '../filter-base';
 
 @Component({
   selector: 'angular-challenges-filter-b',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule],
   template: `
-    <section>
-      <div>
-        <h2>Filter B</h2>
-      </div>
+    <angular-challenges-filter-layout
+      [title]="title()"
+      [descriptions]="descriptions()"
+      [customForm]="customForm"
+    />
 
+    <ng-template #customForm>
       <div>
-        <p>Find something by filter B</p>
-        <input [formControl]="filterB" />
+        <textarea #filterInput></textarea>
       </div>
 
-      <button (click)="addFilterB()">Apply Filter</button>
-    </section>
+      <button (click)="addFilter(filterInput.value)">Run Filter</button>
+    </ng-template>
   `,
+  imports: [CommonModule, FilterLayoutComponent],
 })
-export class FilterBComponent {
-  filterB = new UntypedFormControl();
-  @Output() filterValue = new EventEmitter();
-
-  addFilterB(): void {
-    this.filterValue.emit(this.filterB.value);
-  }
+export class FilterBComponent extends FilterBaseDirective {
+  title = signal('Filter B');
+  descriptions = signal(['Find something by filter B']);
 }

apps/challenges/src/app/duplication-layout-code/filter-base.ts

@@ -0,0 +1,10 @@
+import { Directive, EventEmitter, Output } from '@angular/core';
+
+@Directive()
+export abstract class FilterBaseDirective {
+  @Output() filterValue = new EventEmitter();
+
+  addFilter(value: string): void {
+    this.filterValue.emit(value);
+  }
+}

apps/challenges/src/app/duplication-layout-code/filter-layout.component.ts

@@ -0,0 +1,66 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  TemplateRef,
+  ViewChild,
+  input,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FilterBaseDirective } from './filter-base';
+
+@Component({
+  selector: 'angular-challenges-filter-layout',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <section>
+      <div>
+        <h2>{{ title() }}</h2>
+      </div>
+
+      <div>
+        @for (description of descriptions(); track $index) {
+        <p>{{ description }}</p>
+        }
+      </div>
+
+      <!-- Content holder -->
+      <ng-container [ngTemplateOutlet]="currentTemplate"></ng-container>
+    </section>
+
+    <ng-template #defaultForm>
+      <div>
+        <input #filterInput />
+      </div>
+
+      <button (click)="filterValue.emit(filterInput.value)">
+        Apply Filter
+      </button>
+    </ng-template>
+  `,
+})
+export class FilterLayoutComponent
+  extends FilterBaseDirective
+  implements OnInit
+{
+  title = input.required<string>();
+  descriptions = input<string[]>();
+
+  @ViewChild('defaultForm', { static: true })
+  defaultForm!: TemplateRef<unknown>;
+
+  currentTemplate!: TemplateRef<unknown>;
+
+  @Input({ required: false }) customForm!: TemplateRef<unknown>;
+
+  ngOnInit(): void {
+    if (this.customForm) {
+      this.currentTemplate = this.customForm;
+    } else {
+      this.currentTemplate = this.defaultForm;
+    }
+  }
+}