Dart doesn't do [class]

[kwalrath]

If you use [className] instead, it works.

Misko says, "We alias [class] to [className] so it looks like the alias is broken in Dart."

Example:

// In Dart code:
class AppComponent {
  //...
  String badCurly = 'bad curly'; // Works with [className].
  //...
}

<!-- In HTML: -->
<div class="bad curly special">Bad curly special</div>

<!-- reset/override all class names with a binding  -->
<div class="bad curly special"
     [className]="badCurly">Bad curly</div>

If you change [className] to [class], it stops working.

See the whole sample in angular/angular.io#758. It's based on the TypeScript Template Syntax page, which has a plunkr for its sample.

[kwalrath]

cc @mhevery

[pkozlowski-opensource]

class -> className seems to be properly mapped in Dart (

angular/modules/angular2/src/platform/browser/browser_adapter.ts

Line 7 in e7470d5

'class': 'className',

) so there is sth else that must be going here.

I suspect that it might be interference of the class and [class] used on the same element. @kwalrath would you mind changing to <div [class]="badCurly">Bad curly</div> and see if classes from the badCurly are applied?

[kwalrath]

Nope, they aren't applied. Here's what I see with <div [class]="badCurly">Bad curly</div>:

Here's what I see with <div class="bad curly special" [class]="badCurly">Bad curly</div>:

[kwalrath]

And, just to be complete, here's the correct version that I see when I use <div class="bad curly special" [className]="badCurly">Bad curly</div>:

[kwalrath]

You can see the complete code in the template-syntax example. The HTML code is in lib/app_component.html, and the Dart code is in lib/app_component.dart.

[pkozlowski-opensource]

Obsolete as Dart-specific.

[kwalrath]

This issue was moved to angulardart/angular#43

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}