ng-class equivalent behaviour

[jbdeboer]

[If this already exists, a pointer to the docs would be awesome.]

In AngularDart, I have an element:
<div class="a" ng-class="someExpr"></div> where someExpr evaluates to "b c".

The rendered output is <div class="a b c"></div>.

How do I use this pattern in Angular 2?

[pkozlowski-opensource]

This syntax is not currently supported with the existing class directive (it understand only object literals syntax right now). Last time I've discussed string-based with @IgorMinar it sounded like we might not want to support it in ng2 as it makes it easy to "hard-code" CSS classes in JS/Dart code.

We should probably re-discuss this and have definitive stance on this one.

[jbdeboer]

The current best option, AFAICT, is to re-write the above example as:
<div [class-name]="'a ' + someExpr"></div>

which is super-fugly.

[SekibOmazic]

@jbdeboer I had a similar problem and used following syntax:

<div class="a" [class.b]="bExpr" [class.c]="cExpr"></div>

There is also the CSSSelector which works with object literals, but I found it inconvenient.

[jbdeboer]

@SekibOmazic Yes; but that approach would require us to rewrite our controller logic; which isn't something we are eager to do!

Thinking on the "best option" that I listed: it does not work well either, since in Angular1, we don't know if someExpr is a string, list or map without inspecting the controller. That transformation only works for strings.

[naomiblack]

Assigning to @mhevery and (also @IgorMinar) for discussion. Is this something that we can support in angular2, or else, what's our best recommendation for handling this pattern?

[yjbanov]

I think it's safe to support <div class="a" [class]="expr"></div> where expr evaluates to List or Map and [class] simply adds more classes to the already existing literal list.

[mhevery]

I agree with @yjbanov, I think we should support it.

[mhevery]

Also fix for ng-style

[naomiblack]

Assigning to @vsavkin to clarify what needs to be implemented.

[pkozlowski-opensource]

Had a productive chat with @vsavkin - I'm unblocked.

[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.}