Repository navigation
NgClass and empty string as a class name #4033
Description
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
- 1st hero is "Mr. Long Name"
- 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};
}
Activity
[-]ngmodel[/-][+]NgClass and empty string as a class name [/+]pkozlowski-opensource commentedon Sep 13, 2015
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 commentedon Sep 13, 2015
@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?
fix(NgClass): ignore empty and blank class names
wardbell commentedon Sep 15, 2015
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 commentedon Sep 15, 2015
@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 commentedon Sep 15, 2015
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 commentedon Sep 7, 2019
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.