title: Angular 12 Unit Testing: Directive with Can't bind to 'scrollIntoForm'
body: <p>I have a scroll-into-new-form.directive.ts file</p>
  <pre><code>import {
    Directive,
    ElementRef,
    HostListener,
    Input,
    OnChanges,
  } from '@angular/core';
  
  /***
   * @example
   *  &lt;div [scrollIntoForm] [index]=&quot;1&quot;&gt;
   *  &lt;/div&gt;
   */
  @Directive({
    selector:
      // eslint-disable-next-line
      '[scrollIntoForm]',
  })
  export class ScrollIntoNewFormDirective implements OnChanges {
    constructor(private el: ElementRef) {}
    @Input() public index: number;
  
    ngOnChanges(changes) {
      if (changes.index.currentValue != 0 &amp;&amp; changes.index.firstChange) {
        this.el.nativeElement.scrollIntoView({
          block: 'center',
          inline: 'nearest',
          behavior: 'smooth',
        });
      }
    }
  
    @HostListener('click')
    onChangeOrder() {
      this.el.nativeElement.scrollIntoView({
        block: 'center',
        inline: 'nearest',
        behavior: 'smooth',
      });
    }
  }
  
  </code></pre>
  <p>In component use:
  <code>&lt;div [formGroupName]=&quot;i&quot; [scrollIntoForm] [index]=&quot;i&quot;&gt;&lt;/div&gt;</code>
  In file component specs file: I declared ScrollIntoNewFormDirective. But when I run test, it show error:</p>
  <p><code>Template parse errors: Can't bind to 'scrollIntoForm' since it isn't a known property of 'div'. (&quot;&quot;&gt; &lt;div [formGroupName]=&quot;i&quot; [ERROR -&gt;][scrollIntoForm] [index]=&quot;i&quot;&gt; &lt;span class=&quot;label&quot;&gt;連絡先: 優先度 {{ i + 1 }}&lt;/span&gt; &quot;): ng:///DynamicTestModule/CreatedAclFormComponent.html@249:35</code></p>
  <p>Please help me to fix it!!!</p>