Angular 4+ ngClass Mix Expressions

Angular 4+ ngClass Mix Expressions

Content Index :

Angular 4+ ngClass Mix Expressions
Tag : angular , By : micaleel
Date : January 12 2021, 08:33 AM

help you fix your problem 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)"
[class]="'cssprefix-' + var.value" [ngClass]="{'newclass' : ifTrue}"
class="{{ 'cssprefix-' + var.value }}" [ngClass]="{'newclass' : ifTrue}"

No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Can AngularJS ngClass expressions be nested?

Tag : angularjs , By : littlefuzz
Date : March 29 2020, 07:55 AM
it should still fix some issue You certainly can do either of the two options you have mentioned. The second is far preferable to the first in terms of readable code.
The expandoState property you mention should probably be a property or a method placed on the scope. Your attribute would then read something like
$scope.expandoState = function() {
    // Return current state name, based on $scope.day
$scope.buttonClass = function() {
    // Return button class name, based on $scope.day

ngclass expressions, is value in an array

Tag : javascript , By : jim
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further I am using a ng-repeat and I want the ng-repeated element to have a conditional ng-class. , Try
<tr ng-repeat="user in users" ng-class="{'ts-li-selected' : userSelected(user)}" ng-click="selectUser(user,$event,$index)">
$scope.userSelected =  function(user){
    return $.inArray(user, $scope.selectedUser) > -1;

Angular NgClass with multiple expressions

Tag : angularjs , By : Matt Watson
Date : March 29 2020, 07:55 AM
should help you out I want to evaluate multiple expressions, but the class applied will be the same. Here's an example... , This is just fine and I believe the correct way to do it.
<tr ng-class="{'highlight' : Expression1 || Expression2 || Expression3}">

Angular mix different [ngClass] expressions

Tag : css , By : Alecsandru Soare
Date : March 29 2020, 07:55 AM
it fixes the issue 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.
<li  class="t-size {{item.status.join(' ')}}" [ngClass]="{'active': item.active }">
 item = {
    status : ['done', 'progressed'],
    active: true
  font-weight: bold;


  font-size: 2rem;

  background-color: yellowgreen;

Angular 6 [ngclass] - add a class which is name is composed by several variables - string concatenation on [ngClass] dir

Tag : javascript , By : flesk
Date : March 29 2020, 07:55 AM
will be helpful for those in need Well, there is a lot ways to do so. I would recommend something like this:
[ngClass]="var1 + var2 + var3"
Related Posts Related QUESTIONS :
  • Does an angular component ever destroy when it is subscribed to router change event once?
  • How do I get the JSON response from httpModule.get?
  • Ngx-logger implementation in angular 8
  • font size increase decrease by button using angular 7
  • Are selectors and module declarations mandatory for components?
  • Why angular is adding '#' in each route?
  • how to block the subsequent clicks in angular?
  • Ionic Angular TypeError: architect_1.createBuilder is not a function
  • Angular app doesn't work on Firefox after updating it to Version 8
  • Angular: Formatting numbers percentage
  • Matrix in FormGroup [Angular 2+]
  • "export 'DOCUMENT' was not found in '@angular/platform-browser'
  • angular autocomplete material
  • Prevent click event from triggering other click elements undernethe the front element
  • How to know when an image has been fully loaded in angular?
  • How to read config file to set API URL inside an Angular App packaged as a WAR and deployed on IBM Liberty
  • npm ERR! Unexpected end of JSON input while parsing near
  • override custom scss variable inside another angular-cli(7) (library) project
  • Angular-7 How to navigate to certain section of the single page website
  • how to disable an input field from a group of input fields in Angular
  • How to unit test selection of a mat-autocomplete option?
  • angular 8 form reset with value not working correctly
  • ng: error in production with Cb(...).firestore is not a function
  • Property 'result' does not exist on type 'EventTarget'
  • Cannot read property 'subscribe' of undefined on Ionic 4 , Angular 8
  • Repository is not clean. Please commit or stash any changes before updating In Angular 8
  • @angular-devkit/core module not found after angular-cli global fresh install
  • Lazy module loading error after updating to Angular 8
  • Using mat-tab-group focusChange event, How to stop user navigating to other tab
  • Best practice class member initialization
  • Angular 8 : TypeError: Found non-callable @@iterator
  • ng build --prod non-exported function
  • (Ionic4) How to dynamically go to previous page?
  • Angular 8.0.1 platform.es5.js:102 Uncaught TypeError: Object(...) is not a function
  • Zsh : command not found : ng on new Mac OS Catalina
  • Ag grid: How to add a row with sorting order
  • Failed to construct 'Worker': Module scripts are not supported on DedicatedWorker yet in Angular 8
  • How to write a function which will be return : Observable <ModelTemp>
  • cannot compile Ivy Rendering Engine in Angular 8
  • What is best way to apply ngif directive to <li> element?
  • Angular 7: Trigger valuechanges on addControl, if value's present
  • Function inside a ts file
  • Angular - Are admin files downloadable?
  • node_modules/@angular/cdk/table"' has no exported member 'CdkTextColumn'
  • node_modules/rxjs/Subject"' has no exported member 'Subject'
  • Angular - how to http service subscribe without response
  • how to test all my Service are injected into component
  • After upgrading to Angular8, AppEngine is serving scripts with the incorrect mime-type
  • Angular 6 - Cannot read property 'outlets' of null
  • Setting up background img with angular 7
  • Make BehaviorSubject persist across browser tabs? (@HostListener?)
  • Angular 7 : How to deploy Angular "Build" folder along with ASP.Net Web Api in Visual Studio 2017
  • How return name of image from FormControl in ReactivForms
  • Angular 7 HTTP Post 500 Internal Server Error
  • Ionic show data which is equal to the value
  • Angular directive inputs over component from another module cause an error
  • ValidationError: Progress Plugin Invalid Options
  • Angular mat-table : - Sort icon missing on custom sort
  • How use routing in angular correctly?
  • Automatic width mat-option in Angular Material
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com