feature(): add adapter pattern

Author: Patrick

src/app/06. Adapter/adapter-routing.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AdapterComponent } from './adapter/adapter.component';
+
+const routes: Routes = [{ path: '', component: AdapterComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AdapterRoutingModule { }

src/app/06. Adapter/adapter.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AdapterRoutingModule } from './adapter-routing.module';
+import { AdapterComponent } from './adapter/adapter.component';
+import {AngularMaterialModule} from "../modules/angular-material.module";
+
+
+@NgModule({
+  declarations: [AdapterComponent],
+  imports: [
+    CommonModule,
+    AdapterRoutingModule,
+    AngularMaterialModule
+  ]
+})
+export class AdapterModule { }

src/app/06. Adapter/adapter/adapter.component.html

@@ -0,0 +1,59 @@
+<div class="container">
+  <h1>
+    Adapter
+  </h1>
+  <div class="content">
+    <mat-card>
+      <mat-card-title>
+        Cat
+      </mat-card-title>
+      <mat-card-subtitle>
+        It's only a cat
+      </mat-card-subtitle>
+      <mat-card-actions>
+        <button mat-raised-button (click)="btnCatSound()">Make sounds</button>
+      </mat-card-actions>
+      <mat-card-content>
+        <div *ngFor="let catSound of catSounds">
+          {{ catSound }}
+        </div>
+      </mat-card-content>
+
+    </mat-card>
+    <mat-card>
+      <mat-card-title>
+        Toy
+      </mat-card-title>
+      <mat-card-subtitle>
+        It's only a toy
+      </mat-card-subtitle>
+      <mat-card-actions>
+        <button mat-raised-button (click)="btnToySound()">Make sounds</button>
+      </mat-card-actions>
+      <mat-card-content>
+        <div *ngFor="let toySound of toySounds">
+          {{ toySound }}
+        </div>
+      </mat-card-content>
+
+    </mat-card>
+    <mat-card>
+      <mat-card-title>
+          ToyCat
+      </mat-card-title>
+      <mat-card-subtitle>
+          It's a toy, but imitates a cat :O
+      </mat-card-subtitle>
+      <mat-card-actions>
+        <button mat-raised-button (click)="btnCatAdapterSound()">Make sounds</button>
+      </mat-card-actions>
+      <mat-card-content>
+
+        <div *ngFor="let catAdapterSound of catAdapterSounds">
+          {{ catAdapterSound }}
+        </div>
+      </mat-card-content>
+
+    </mat-card>
+  </div>
+</div>

src/app/06. Adapter/adapter/adapter.component.scss

@@ -0,0 +1,20 @@
+div {
+  text-align: center;
+}
+
+div.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+div.content {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+mat-card {
+  margin: 15px;
+  max-width: 300px;
+}

src/app/06. Adapter/adapter/adapter.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdapterComponent } from './adapter.component';
+
+describe('AdapterComponent', () => {
+  let component: AdapterComponent;
+  let fixture: ComponentFixture<AdapterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AdapterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AdapterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/06. Adapter/adapter/adapter.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import {Cat, NorwegianForest} from "../models/cat.model";
+import {Toy, ToyCat} from "../models/toy.model";
+import {CatAdapter} from "../models/cat.adapter";
+
+@Component({
+  selector: 'app-adapter',
+  templateUrl: './adapter.component.html',
+  styleUrls: ['./adapter.component.scss']
+})
+export class AdapterComponent {
+  public catSounds: string[];
+  public toySounds: string[];
+  public catAdapterSounds: string[];
+
+  private cat: Cat; // adaptee
+  private toy: Toy; // target interface
+  private catAdapter: Toy; // adapter
+
+  constructor() {
+    this.catSounds = [];
+    this.toySounds = [];
+    this.catAdapterSounds = [];
+
+    this.client();
+  }
+
+  public btnCatSound() {
+    this.catSounds.push(this.cat.makeSound());
+  }
+
+  public btnToySound() {
+    this.toySounds.push(this.toy.squeak());
+  }
+
+  public btnCatAdapterSound() {
+    this.catAdapterSounds.push(this.catAdapter.squeak());
+  }
+
+  private client(): void {
+
+    // inspired by
+    // https://www.geeksforgeeks.org/adapter-pattern/
+
+    this.cat = new NorwegianForest();
+    this.toy = new ToyCat();
+    this.catAdapter = new CatAdapter(this.cat);
+  }
+
+}