docs: add host directive example (#514)

Closes #512

Author: timdeschryver

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();
+});

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 {}