Commit 6efeb36

authored

docs: add host directive example (#514)

Closes #512

1 parent a18f647 commit 6efeb36Copy full SHA for 6efeb36

File tree

+43

-0

lines changed

+43

-0

lines changed

Lines changed: 22 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,22 @@`
	`1`	`+import { aliasedInput, render, screen } from '@testing-library/angular';`
	`2`	`+import { HostDirectiveComponent } from './23-host-directive';`
	`3`	`+`
	`4`	`+test('can set input properties of host directives using aliasedInput', async () => {`
	`5`	`+ await render(HostDirectiveComponent, {`
	`6`	`+ inputs: {`
	`7`	`+ ...aliasedInput('atlText', 'Hello world'),`
	`8`	`+ },`
	`9`	`+ });`
	`10`	`+`
	`11`	`+ expect(screen.getByText(/helloworld/i)).toBeInTheDocument();`
	`12`	`+});`
	`13`	`+`
	`14`	`+test('can set input properties of host directives using componentInputs', async () => {`
	`15`	`+ await render(HostDirectiveComponent, {`
	`16`	`+ componentInputs: {`
	`17`	`+ atlText: 'Hello world',`
	`18`	`+ },`
	`19`	`+ });`
	`20`	`+`
	`21`	`+ expect(screen.getByText(/helloworld/i)).toBeInTheDocument();`
	`22`	`+});`

Lines changed: 21 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,21 @@`
	`1`	`+import { Component, Directive, ElementRef, input, OnInit } from '@angular/core';`
	`2`	`+`
	`3`	`+@Directive({`
	`4`	`+ selector: '[atlText]',`
	`5`	`+})`
	`6`	`+export class TextDirective implements OnInit {`
	`7`	`+ atlText = input<string>('');`
	`8`	`+`
	`9`	`+ constructor(private el: ElementRef) {}`
	`10`	`+`
	`11`	`+ ngOnInit() {`
	`12`	`+ this.el.nativeElement.textContent = this.atlText();`
	`13`	`+ }`
	`14`	`+}`
	`15`	`+`
	`16`	`+@Component({`
	`17`	`+ selector: 'atl-host-directive',`
	`18`	+ template: ``,
	`19`	`+ hostDirectives: [{ directive: TextDirective, inputs: ['atlText'] }],`
	`20`	`+})`
	`21`	`+export class HostDirectiveComponent {}`

Comments

(0)