title: How to fix Property binding ng-forOf not used by any directive on an embedded template?
body: <p>I'm trying to set-up a simple <code>ng-for</code> to loop over a list of project in angular but got stuck with it. I already tried the solution in <a href="https://stackoverflow.com/q/34012291/802365">Angular2 exception: Can't bind to 'ngFor' since it isn't a known native property</a> (fix missing <code>#</code>) but without success.</p>
  
  <pre><code>EXCEPTION: Template parse errors:
  Can't bind to 'ng-forOf' since it isn't a known native property ("&lt;div class="ui link cards"&gt;
      &lt;div class="card" [ERROR -&gt;]*ng-for="#project of projects"&gt;
          &lt;div class="image"&gt;
              &lt;img src="{{project.illustrat"): Projects@1:22
  Property binding ng-forOf not used by any directive on an embedded template ("&lt;div class="ui link cards"&gt;
      [ERROR -&gt;]&lt;div class="card" *ng-for="#project of projects"&gt;
          &lt;div class="image"&gt;
              &lt;img src="{"): Projects@1:4
  </code></pre>
  
  <h3>index.js</h3>
  
  <pre><code>import * as stylesheet from '../assets/styles/app.scss';
  
  import $ from 'jquery';
  import jQuery from 'jquery';
  // export for others scripts to use
  window.$ = $;
  window.jQuery = jQuery;
  
  
  import 'zone.js/lib/browser/zone-microtask';
  import 'reflect-metadata';
  import 'babel-polyfill';
  
  import {provide} from 'angular2/core';
  import {bootstrap} from 'angular2/platform/browser';
  
  import {App} from './app.component.js'
  bootstrap(App, []);
  </code></pre>
  
  <h3>app.component.js</h3>
  
  <pre><code>import {Component} from 'angular2/core';
  import {Projects} from '../app/projects/projects';
  
  @Component({
      selector: 'my-app',
      template: '&lt;projects&gt;Loading...&lt;/projects&gt;',
      directives: [Projects]
  })
  
  export class App {
      constructor(projects:Projects) {
          this.projects = projects;
          console.log(this.projects);
      }
  }
  </code></pre>
  
  <h3>index.html</h3>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
      &lt;my-app&gt;
            &lt;ng-content&gt;&lt;/ng-content&gt;
      &lt;/my-app&gt;
  &lt;script src="dist/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h3>project.js</h3>
  
  <pre><code>import {Component, View} from 'angular2/core';
  import {NgFor} from 'angular2/common';
  
  @Component({
      selector: 'projects, [projects]'
  })
  @View({
      //templateUrl: '/app/projects/projects.html',
      directives: [NgFor],
      template: "&lt;div *ng-for='#project of projects'&gt; &lt;p&gt;{{project.description}} &lt;/div&gt;",
  })
  export class Projects {
      constructor() {
          this.projects = [
              {
                  "customer": "Matt Giampietro",
                  "description": "Lorem ipsum dolor sit amet…",
                  "name": "project #1"
              },
              {
                  "customer": "test",
                  "description": "Lorem ipsum dolor sit amet…",
                  "name": "project #2"
              }
          ]
      }
  }
  </code></pre>
  
  <h3>Question</h3>
  
  <ul>
  <li>How do I solve this?</li>
  <li>fail both with internal/external template (<em>i.e.</em> <code>templateUrl</code>)</li>
  </ul>