add SuffixDirective

- add a new column to show SuffixDirective usage
- add officeSurface field to employee.model.ts as a new column value

src/app/app.component.html

@@ -1,13 +1,14 @@
 <app-table [data]="employeeList">
 
-  <ng-template appInjector="caption">Table description</ng-template>
+  <ng-template appInjector="caption">Staff</ng-template>
 
   <ng-template appInjector="header">
     <th>Id</th>
     <th>Name</th>
     <th>Surname</th>
     <th>Age</th>
     <th>foo()</th>
+    <th>NG Directive</th>
   </ng-template>
 
   <ng-template appInjector="body" let-employee>
@@ -20,6 +21,12 @@
     <td>
       <button type="button" (click)="foo(employee)">{{employee.name}}</button>
     </td>
+    <td>
+      <label>
+        Office surface
+        <input type="text" [value]="employee.officeSurface" appSuffix="m²">
+      </label>
+    </td>
   </ng-template>
 
   <ng-template appInjector="footer">
@@ -28,6 +35,7 @@
     <th>Surname</th>
     <th>Age</th>
     <th>foo()</th>
+    <th>Directive test</th>
   </ng-template>
 
 </app-table>

src/app/app.module.ts

@@ -5,12 +5,14 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { TableComponent } from './components/table/table.component';
 import { InjectorDirective } from './directives/injector/injector.directive';
+import { SuffixDirective } from './directives/suffix/suffix.directive';
 
 @NgModule({
   declarations: [
     AppComponent,
     TableComponent,
-    InjectorDirective
+    InjectorDirective,
+    SuffixDirective
   ],
   imports: [
     BrowserModule,

src/app/directives/suffix/suffix.directive.spec.ts

@@ -0,0 +1,52 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SuffixDirective } from './suffix.directive';
+
+const unformated = '23';
+const suffix = 'm²';
+const formated = `${unformated} ${suffix}`;
+
+
+@Component({
+  template: `<input type="text" autofocus value="${unformated}" appSuffix="${suffix}">`
+})
+class TestComponent { }
+
+
+describe('SuffixDirective', () => {
+
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+  let debugElement: HTMLElement;
+  let input: HTMLInputElement | null;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TestComponent, SuffixDirective ]
+    });
+
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    debugElement = fixture.debugElement.nativeElement;
+    input = debugElement.querySelector('input');
+  });
+
+  // fit('should create an instance', () => {
+  //   expect(directive).toBeTruthy();
+  // });
+
+  it('should create component', () => {
+    expect(component).toBeDefined();
+  });
+
+  it(`should show '${unformated}' when the target input is focused`, () => {
+    expect(input?.value).toBe(unformated);
+  })
+
+  it(`should show '${formated}' when the target input is blured`, () => {
+    input?.blur();
+    fixture.detectChanges();
+    expect(input?.value).toBe(formated);
+  })
+
+});

src/app/directives/suffix/suffix.directive.ts

@@ -0,0 +1,40 @@
+import { Directive, Input, ElementRef, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[appSuffix]'
+})
+export class SuffixDirective {
+
+  @Input('appSuffix') suffix!: string;
+
+  constructor(private elementRef: ElementRef) {
+    this.input = this.elementRef.nativeElement;
+  }
+
+  ngOnInit() {
+    this.input.value = SuffixDirective.format(this.input.value, this.suffix);
+  }
+
+  @HostListener("focus", ["$event.target.value"])
+  onFocus(value: string) {
+    this.input.value = SuffixDirective.unformat(value, this.suffix);
+  }
+
+  @HostListener("blur", ["$event.target.value"])
+  onBlur(value: string) {
+    this.input.value = SuffixDirective.format(value, this.suffix);
+  }
+
+  static format(value: string, suffix: string): string {
+    return value.length > 0 ? `${value} ${suffix}` : `${value}`;
+  }
+
+  static unformat(value: string, suffix: string): string {
+    const begin = 0;
+    const end   = value.length - suffix.length - 1
+    return value.substr(begin, end);
+  }
+
+  private input: HTMLInputElement;
+
+}

src/app/models/employee.model.ts

@@ -1,5 +1,7 @@
 export class Employee {
 
+  readonly officeSurface: number = Math.trunc(  Math.random() * 100  );
+
   constructor(
     public readonly id:      number,
     public readonly name:    string,