title: I have created a custom directive in angular for for-loop. getting a warning, 'Can't bind to 'appNgLoopOf' since it isn't a known property of 'p'
body: <p><code>my-for.directive.ts</code></p>
  
  <pre><code>
  @Directive({
    selector: '[appMyFor]'
  })
  export class MyForDirective implements OnInit, OnChanges {
  
    @Input() appMyForOf: Array&lt;any&gt;;
  
    constructor(private temRef: TemplateRef&lt;any&gt;, private viewRef: ViewContainerRef) { }
    ngOnChanges(changes: import("@angular/core").SimpleChanges): void {
  
      for (const input of this.appMyForOf) {
        this.viewRef.createEmbeddedView(this.temRef, {
          $implicit: input,
          index: this.appMyForOf.indexOf(input),
        });
      }
    }
    ngOnInit(): void {
    }
  }
  </code></pre>
  
  <p>My view looks like:</p>
  
  <p><strong>d-test2.component.html</strong></p>
  
  <pre><code>&lt;p *appMyFor="let nr of numbers"&gt;
      {{ nr }}
  &lt;/p&gt;
  </code></pre>
  
  <p>component looks like:</p>
  
  <p><strong>d-test2.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-d-test2',
    templateUrl: './d-test2.component.html',
    styleUrls: ['./d-test2.component.css']
  })
  export class DTest2Component implements OnInit {
  
    constructor() { }
    numbers = [1, 2, 3];
  
    ngOnInit(): void {
    }
  
  }
  </code></pre>
  
  <p>so the problem here is paragraph element in <strong>d-test2.component.html</strong> not rendered in the browser.
  seeing a warning in the browser console. </p>