NgClass and empty string as a class name

[wardbell]

Example:

// hero-detail-component.html
<input [(ng-model)]="hero.name"  class="foo" [ng-class]="addClass()"></input>

// hero-detail-component.ts
addClass() {
  return this.hero.name.length > 5 ? "selected" : "";
}

Assume hero in this detail changes as a new hero is selected from a parent list

1. 1st hero is "Mr. Long Name"
2. 2nd hero is "short"
   transpiler: show line numbers that have errors #1 First hero displays and the class "selected" is present
   Integrate dartanalyzer into build #2 Second hero triggers change in value. Angular fails with exception

DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.(…) thrown in NgClass.onCheck in the line this._applyIterableChanges(changes);

Also fails the same way when addClass is:

addClass() {
  return this.hero.name.length > 5 ? "selected" : " notSelected"; // leading space
}

But "works" if it is:

addClass() {
  return this.hero.name.length > 5 ? "selected" : "notSelected";} // no space
}

The array-result form is OK

  addClass() {
    return this.hero.name.length > 5 ? ["selected"] : [];
  }

And the object-result form is OK

  addClass() {
    return {"selected": this.hero.name.length > 5};
  }

[pkozlowski-opensource]

I've renamed this issue as it has nothing to do with NgModel but the crux of the issue is what NgClass does with empty strings.

[pkozlowski-opensource]

@wardbell I wonder how we should fix it. My first reaction is to trim strings representing class names and simply ignore empty (blank) strings. WDYT?

[wardbell]

Trim and ignore extra white space for sure.

Empty string should be ignored. It means "no additional class names".

I would not mind if this string variant of the NgClass API was removed. The object notion is the most clear and perhaps easier to construct.

[pkozlowski-opensource]

@wardbell right, PR #4173 trims class names. Regarding removal of the string-based form - I don't use it often but it comes handy when you need to calculate class name dynamically (that it, you don't know it up-front). Not super-common, but happens.

BTW, in your particular use case the easiest approach would be to go without any directive at all and use the special-cased syntax from the compiler:

<input [(ng-model)]="hero.name" class="foo" [class. selected]="hero.name.length > 5">

[wardbell]

Yes I have used that and it is worth teaching. Perfect for setting a single class value. Not so great when you have multiple class names to set. So many ways to skin this cat. Are there ever enough? ;-)

p.s.: I have no problem calculating a class name dynamically and adding it to the definition object with object indexing: classes[theName] = theValue. Not quite as cool as composing the string with back-tick interpolation but serviceable.

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