Angular Directive Case?

I have been (and still a bit) confused about the case of angular 2’s directives … is it *ngFor or *ng-for … ie camel case or dash case? I’ve always used dash case in the alpha’s of Angular 2. However, the docs suggests camel case … but then the working example in this doc suggests dash case … Confusing!

I decided to do a test rig myself on the latest version of Angular 2 (beta 0) …

camelCase

The following component works fine:

import { Component } from "angular2/core";

@Component({
  selector: "my-app",
  template: '<div *ngFor="#person of people">{{person.name}}</div>'
})
export class AppComponent {
  public people = [
    { id: 11, name: "John Smith" },
    { id: 12, name: "Fred Jones" },
    { id: 13, name: "Bob Peters" }
  ];
}

dash-case

However, the following component errors:

import { Component } from "angular2/core";

@Component({
  selector: "my-app",
  template: '<div *ng-for="#person of people">{{person.name}}</div>'
})
export class AppComponent {
  public people = [
    { id: 11, name: "John Smith" },
    { id: 12, name: "Fred Jones" },
    { id: 13, name: "Bob Peters" }
  ];
}

You get: Template parse errors: Can’t bind to ‘ng-forOf’ since it isn’t a known native property

So, it looks like we’re using camel case now in Angular 2 beta but the live examples still need to catch up …

Comments

Gopike March 14, 2018

Such a Nice explanation about the Directives. By reading your article, Anyone can easily understand. Very Good Article, Thank you so much for sharing it. Really it will be helpful for others. Also you can find latest topics in Angular 4 here

Learn React with TypeScript - 3rd Edition

New

A comprehensive guide to building modern React applications with TypeScript. Learn best practices, advanced patterns, and real-world development techniques.

View on Amazon