From d16cdc2eb7cfdbd874a5e0d74ae0bc1fd70f780a Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Fri, 10 Jan 2025 20:46:05 +0100
Subject: [PATCH] docs: add host directive example

---
 .../app/examples/23-host-directive.spec.ts    | 22 +++++++++++++++++++
 .../src/app/examples/23-host-directive.ts     | 21 ++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 apps/example-app/src/app/examples/23-host-directive.spec.ts
 create mode 100644 apps/example-app/src/app/examples/23-host-directive.ts

diff --git a/apps/example-app/src/app/examples/23-host-directive.spec.ts b/apps/example-app/src/app/examples/23-host-directive.spec.ts
new file mode 100644
index 0000000..3289299
--- /dev/null
+++ b/apps/example-app/src/app/examples/23-host-directive.spec.ts
@@ -0,0 +1,22 @@
+import { aliasedInput, render, screen } from '@testing-library/angular';
+import { HostDirectiveComponent } from './23-host-directive';
+
+test('can set input properties of host directives using aliasedInput', async () => {
+  await render(HostDirectiveComponent, {
+    inputs: {
+      ...aliasedInput('atlText', 'Hello world'),
+    },
+  });
+
+  expect(screen.getByText(/hello world/i)).toBeInTheDocument();
+});
+
+test('can set input properties of host directives using componentInputs', async () => {
+  await render(HostDirectiveComponent, {
+    componentInputs: {
+      atlText: 'Hello world',
+    },
+  });
+
+  expect(screen.getByText(/hello world/i)).toBeInTheDocument();
+});
diff --git a/apps/example-app/src/app/examples/23-host-directive.ts b/apps/example-app/src/app/examples/23-host-directive.ts
new file mode 100644
index 0000000..3e201c7
--- /dev/null
+++ b/apps/example-app/src/app/examples/23-host-directive.ts
@@ -0,0 +1,21 @@
+import { Component, Directive, ElementRef, input, OnInit } from '@angular/core';
+
+@Directive({
+  selector: '[atlText]',
+})
+export class TextDirective implements OnInit {
+  atlText = input<string>('');
+
+  constructor(private el: ElementRef) {}
+
+  ngOnInit() {
+    this.el.nativeElement.textContent = this.atlText();
+  }
+}
+
+@Component({
+  selector: 'atl-host-directive',
+  template: ``,
+  hostDirectives: [{ directive: TextDirective, inputs: ['atlText'] }],
+})
+export class HostDirectiveComponent {}