feat: implement directives exercise

angular.json

@@ -3,7 +3,8 @@
   "version": 1,
   "cli": {
     "packageManager": "npm",
-    "schematicCollections": ["angular-eslint"]
+    "schematicCollections": ["angular-eslint"],
+    "analytics": "955b7c74-ae29-4025-8907-29a55529de8a"
   },
   "newProjectRoot": "projects",
   "projects": {

src/app/domains/shared/ui-common/click-with-warning.ts

@@ -0,0 +1,35 @@
+import { Dialog } from '@angular/cdk/dialog';
+import { Directive, inject, input, output } from '@angular/core';
+
+import { ConfirmComponent } from '../util-common/confirm';
+
+@Directive({
+  selector: '[appClickWithWarning]',
+  exportAs: 'clickWithWarning',
+  host: {
+    class: 'btn btn-danger',
+    '(click)': 'handleClick($event.shiftKey)',
+  },
+})
+export class ClickWithWarning {
+  private readonly dialog = inject(Dialog);
+
+  readonly warning = input('Are you sure?');
+  readonly appClickWithWarning = output<void>();
+
+  handleClick(shiftKey: boolean): void {
+    if (shiftKey) {
+      this.appClickWithWarning.emit();
+      return;
+    }
+
+    const ref = this.dialog.open<boolean>(ConfirmComponent, {
+      data: this.warning(),
+    });
+    ref.closed.subscribe((result) => {
+      if (result) {
+        this.appClickWithWarning.emit();
+      }
+    });
+  }
+}

src/app/domains/shared/ui-common/tooltip.ts

@@ -0,0 +1,79 @@
+import {
+  afterRenderEffect,
+  DestroyRef,
+  Directive,
+  ElementRef,
+  EmbeddedViewRef,
+  inject,
+  input,
+  TemplateRef,
+  ViewContainerRef,
+} from '@angular/core';
+
+@Directive({
+  selector: '[appTooltip]',
+  host: {
+    '(mouseover)': 'setHidden(false)',
+    '(mouseout)': 'setHidden(true)',
+  },
+})
+export class Tooltip {
+  private readonly viewContainer = inject(ViewContainerRef);
+  private viewRef: EmbeddedViewRef<unknown> | undefined;
+  private readonly host = inject(ElementRef<HTMLElement>);
+  private readonly destroyRef = inject(DestroyRef);
+
+  readonly template = input<TemplateRef<unknown> | undefined>(undefined, {
+    alias: 'appTooltip',
+  });
+
+  constructor() {
+    afterRenderEffect(() => {
+      const template = this.template();
+      if (!template) {
+        return;
+      }
+      this.initTooltip(template);
+    });
+
+    this.destroyRef.onDestroy(() => {
+      this.removeTooltip();
+    });
+  }
+
+  private removeTooltip() {
+    if (this.viewRef) {
+      this.viewRef.destroy();
+      this.viewRef = undefined;
+    }
+  }
+
+  initTooltip(template: TemplateRef<unknown>): void {
+    if (this.viewRef) {
+      this.viewRef.destroy();
+    }
+
+    this.viewRef = this.viewContainer.createEmbeddedView(template);
+
+    this.viewRef?.rootNodes.forEach((nativeElement) => {
+      nativeElement.className = 'tooltip';
+      nativeElement.hidden = true;
+    });
+  }
+
+  setHidden(hidden: boolean): void {
+    this.viewRef?.rootNodes.forEach((nativeElement) => {
+      if (!hidden) {
+        this.updatePosition(nativeElement);
+      }
+      nativeElement.hidden = hidden;
+    });
+  }
+
+  private updatePosition(toolTipElement: HTMLElement) {
+    const r = this.host.nativeElement.getBoundingClientRect();
+    toolTipElement.style.left = `${r.left + r.width / 2}px`;
+    toolTipElement.style.top = `${r.top - 8}px`;
+    toolTipElement.style.transform = 'translate(-50%, -100%)';
+  }
+}

src/app/shell/about/about.html

@@ -1,3 +1,27 @@
 <h1>About</h1>
 
 <p>by AngularArchitects.io</p>
+<div>
+  <input
+    [appTooltip]="tmpl"
+    placeholder="Passenger Name"
+    style="max-width: 200px" />
+</div>
+
+<ng-template #tmpl>
+  <div class="tooltip">
+    <h4>2 Tips for Success</h4>
+    <ol>
+      <li>Don't tell everything!</li>
+    </ol>
+  </div>
+</ng-template>
+<br />
+<button (appClickWithWarning)="deleteAll()" #cww="clickWithWarning">
+  Delete All!
+</button>
+<p>&nbsp;</p>
+
+<button (click)="cww.handleClick(true)">
+  Delete without asking questions!
+</button>

src/app/shell/about/about.ts

@@ -1,9 +1,12 @@
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
+import { ClickWithWarning } from '../../domains/shared/ui-common/click-with-warning';
+import { Tooltip } from '../../domains/shared/ui-common/tooltip';
 import { Flight } from '../../domains/ticketing/data/flight';
 
 @Component({
   selector: 'app-about',
+  imports: [ClickWithWarning, Tooltip],
   templateUrl: './about.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -40,4 +43,8 @@ export class About {
       prices: [],
     },
   ]);
+
+  protected deleteAll(): void {
+    console.log('Delete all flights');
+  }
 }