All geek questions in one place

How to import ngFor in angular 2 using javascript

I am trying to create a small sample to display a list using angular 2 beta. Here is the app.component.js file

(function(app) {
app.AppComponent = ng.core
.Component({
  selector: 'my-app',
  template:'<p>My name: {{ myName }}</p>' +
            '<p>Friends:</p>' +
                '<ul>' +
                '<li *ng-for="#name of names">{{ name }}</li>' +
                '</ul>',
directives: [angular.NgFor]
})
.Class({
  constructor: function() {
      this.myName = 'Peter';
      this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
  }
});
})(window.app || (window.app = {}));

I get the following error

Uncaught ReferenceError: angular not defined

Here is the HTML file

<html>

  <head>
    <title>Angular 2 QuickStart</title>

<!-- 1. Load libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>

<!-- 2. Load our 'modules' -->
<script src='app/app.component.js'></script>
<script src='app/boot.js'></script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

Is the syntax used incorrectly here? I tried with angular example page on my official website

+4
source share
1 answer

As Eric said in his comment, there is no longer a need to include basic directives in your component.

Your mistake in use ng-for. Directive Name ngFor:

template: `
  <p>My name: {{ myName }}</p>
  <p>Friends:</p>
  <ul>
    <li *ngFor="#name of names">{{ name }}</li>
  </ul>
`

Hope this helps you, Thierry

+2
source

Source: https://habr.com/ru/post/1621022/

More articles:


All Articles