Using Class with Angular VS Ng-Class While Using a Mixed Expression

Using class with angular vs ng-class while using a mixed expression

The book you have mentioned may have talked about the problems of using ng-class and class {{}} interpolations together wherein updates in the interpolation removes the ng-class classes, this problem has already been resolved, reference. Thus, using interpolation within class attributes is totally fine, and does not break good practice because both has its own quirks.

Your usage of ng-class however is incorrect, you have to concatenate the literal string value with your scope string variable:

<div class="float-left flag" ng-class="'i-flag-' + lang.prefix"></div>

but I think it is much preferable to use your first example instead:

<div class="float-left flag i-flag-{{lang.prefix}}"></div>

Angular mix different [ngClass] expressions

Because you could not have [ngClass] multiple time in same element you could use the combination of [ngClass] and class. When use class in this way with interpolation then you could add several classes as well. Try to use following way.

E.g. HTML

<li  class="t-size {{item.status.join(' ')}}" [ngClass]="{'active': item.active }">

E.g. Component

 item = {
    status : ['done', 'progressed'],
    active: true
  }

E.g. CSS

.done{
  font-weight: bold;
}

.progressed{
  color:blue;
}

.t-size{
  font-size: 2rem;
}

.active{
  background-color: yellowgreen;
}

WORKING DEMO

Hope this will help to you! :)

Angular 4+ ngClass Mix Expressions

You could move the logic that describes what classes to add to controller's method:

// controller
getClasses(ifTrue: boolean, value: string) {
    const ret = {};
    ret['cssprefix-' + value] = true;
    ret['newclass'] = ifTrue;

    return ret;
} 

// in template
[ngClass]="getClasses(ifTrue, var.value)"

You could also bind to class attribute directly:

[class]="'cssprefix-' + var.value" [ngClass]="{'newclass' : ifTrue}"

Or use string interpolation:

class="{{ 'cssprefix-' + var.value }}" [ngClass]="{'newclass' : ifTrue}"

mix use of regular class and ng-class

Don't use angular expression. This works:

<i class="fa" ng-class="t.icon"></i>

(See plunker with example on the p tag: http://plnkr.co/edit/AUN81QF0COtYMeedBygJ?p=preview )

You can put various inputs in ngClass, you can see them in:

https://docs.angularjs.org/api/ng/directive/ngClass

The arguments section has a brief description about them.

Difference between [ngClass] vs [class] binding

This is special Angular binding syntax

<div [class.extra-sparkle]="isDelightful">

This is part of the Angular compiler and you can't build a custom binding variant following this binding style. The only supported are [class.xxx]="...", [style.xxx]="...", and [attr.xxx]="..."

ngClass is a normal Angular directive like you can build it yourself

<div [ngClass]="{'extra-sparkle': isDelightful}">

ngClass is more powerful. It allows you to bind a string of classes, an array of strings, or an object like in your example.

Is there a way to mix ng-class using conditional expression with ng-class using string syntax?

Using list notation:

ng-class="['color-' + myIndex, element.selected ? 'selected' : '']"

or:

ng-class="['color-' + myIndex, {true: 'selected'}[element.selected]]"

Using object notation:

ng-class="{selected: element.selected, {{ 'color-' + myIndex }}: true}"

or:

ng-class="{selected: element.selected}" class="{{ 'color-' + myIndex }}"

Note: this very last method is not recommended as it prevents AngularJS classes (e.g. ng-scope..) from being added.

How to mix conditions and concatenation in [ngClass]

To achieve this, I had to find a workaround as long as I couldn't find any way to make it work properly with only one [ngClass].

I have wrapped the <i> in a span and apply .blurred and .less-opacity to the span. Additionally, I have a simple [ngClass] for the <i> tag with the iconName set as wanted.

Component.html

...
<span class="vignette-icon" [ngClass]="{ 'blur' : isBlurred, 'less-opacity' : !isVisible }">
 <i [ngClass]="'fa-3x fal ' + iconName"></i>
</span>
...

Component.ts

...
@Input() iconName: string;

...

ngOnInit() {
 this.setIconName(this.iconName);
}

...

setIconName(iconName: string) {
 if(!iconName.includes('fa-')) {
   this.iconName = 'fa-' + iconName;
 }
}

...

It works fine like this!

using expression and add all together in ng-class

Try this

<div ng-class="{ 'first second': true }"></div>

or

<div class="second" ng-class="{ 'first': true }"></div>

Adding additional class with ng-class

ng-class operates in three different ways, depending on which of three types the expression evaluates to:

1. If the expression evaluates to a string, the string should be one or more space-delimited class names. (this will match with your case)

2. If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.(EX: 'ng-class="{'my-class': (true/false expression)}")

3. If the expression evaluates to an array, each element of the array should either be a string as in type 1 or an object as in type 2. This means that you can mix strings and objects together in an array to give you more control over what CSS classes appear. See the code below for an example of this. (EX: ng-class="[style1, style2, style3]") refer ng-class doc and you will get more info.

so you can directly use ng-class="panel.contentClass" this will match with the first list item witch is If the expression evaluates to a string, the string should be one or more space-delimited class names..

you can simply change ng-class="{{panel.contentClass}}" to ng-class="panel.contentClass" because ng-class accepts a expression not a interpolated value.

<div class="panel-content" ng-class="panel.contentClass" data-ng-bind-html="panel.content">

DEMO

---

Related Topics