Angular conditional class with ngClass

Question

What is wrong with my Angular code  I am getting  Cannot read property  remove  of undefined at BrowserDomAdapter removeClass      lt ol class  quot breadcrumb quot  gt       lt li  ngClass  quot  active  step    step1   quot   click   quot step  step1    quot  gt Step1 lt  li gt       lt li  ngClass  quot  active  step    step2   quot    click   quot step  step2  quot  gt Step2 lt  li gt       lt li  ngClass  quot  active  step    step3   quot   click   quot step  step3  quot  gt Step3 lt  li gt   lt  ol gt

User · Answer

You can use  ngClass  or  class classname   both will work the same   class my-class   step    step1    nbsp  nbsp  OR   ngClass     my-class   step   step1     Both will work the same

User · Answer

to extend MostafaMashayekhi his answer for option two  you can also chain multiple options with a        ngClass     my-class   step   step1    my-class2  step   step2       Also  ngIf can be used in some of these situations usually combined with a  ngFor  class  mats p   ngIf  mat   painted

User · Answer

Additionally  you can add with method function   In HTML   lt div  ngClass   setClasses    gt     lt  div gt    In component ts     Set Dynamic Classes   setClasses         let classes           constantClass  true         conditional-class   this item id     1            return classes

User · Answer

Another solution would be using  class active    Example     lt ol class  breadcrumb  gt       lt li  class active   step   step1    click   step  step1   gt Step1 lt  li gt   lt  ol gt

User · Answer

For elseif statement  less comparison  use like that   For example you compare three statement   lt div  ngClass   quot step      step1     class1     step      step2     class2     class3   quot  gt    step    lt  div gt

User · Answer

with the following examples you can use  IF ELSE     lt p class    condition    checkedClass     uncheckedClass     gt   lt p  ngClass   condition    checkedClass     uncheckedClass   gt   lt p  ngClass    condition    checkedClass     uncheckedClass    gt

User · Answer

ngClass syntax    ngClass     classname    conditionFlag     You can use like this     lt ol class  breadcrumb  gt     lt li  ngClass     active   step    step1     click   step  step1   gt Step1 lt  li gt     lt li  ngClass     active   step    step2     click   step  step2   gt Step2 lt  li gt     lt li  ngClass     active   step    step3     click   step  step3   gt Step3 lt  li gt   lt  ol gt

User · Answer

Angular version 2  provides several ways to add classes conditionally  type one  class my-class   quot step      step1  quot   type two  ngClass   quot   my-class   step      step1   quot   and multiple option   ngClass   quot   my-class   step      step1    my-class2  step      step2    quot   type three  ngClass   quot  1  my-class1  2  my-class2  3  my-class4   step  quot   type four  ngClass   quot  step   step1    my-class1   my-class2  quot

User · Answer

You should use something   ngClass  instead of  ngClass  like that    lt ol class  breadcrumb  gt     lt li  ngClass    active  step    step1     click   step  step1     gt Step1 lt  li gt

User · Answer

Let  YourCondition is your condition or a boolean property  then do like this   class yourClass   YourCondition

User · Answer

We can make class dynamic by using following syntax  In Angular 2 plus  you can do this in various ways   ngClass   quot   active   arrayData length  amp  amp  arrayData 0   booleanProperty  quot    ngClass   quot   active   step  quot    ngClass   quot step    step1   active     quot    ngClass   quot step   active       quot

User · Answer

While I was creating a reactive form  I had to assign 2 types of class on the button  This is how I did it    lt button type  submit  class  btn   ngClass    formGroup valid   btn-info        disabled    formGroup valid  gt Sign in lt  button gt    When the form is valid  button has btn and btn-class  from bootstrap   otherwise just btn class

User · Answer

In Angular 7 X  The CSS classes are updated as follows  depending on the type of the expression evaluation    string - the CSS classes listed in the string  space delimited  are added Array - the CSS classes declared as Array elements are added Object - keys are CSS classes that get added when the expression given in the value evaluates to a truthy value  otherwise they are removed     lt some-element  ngClass    first second   gt     lt  some-element gt    lt some-element  ngClass     first    second    gt     lt  some-element gt    lt some-element  ngClass     first   true   second   true   third   false   gt     lt  some-element gt    lt some-element  ngClass   stringExp arrayExp objExp  gt     lt  some-element gt    lt some-element  ngClass     class1 class2 class3    true   gt     lt  some-element gt

User · Answer

x000D   x000D   lt div class  collapse in    ngClass    active tab   assignservice     active tab   manage    show      id  collapseExampleOrganization  aria-expanded  true  style    gt  x000D    lt ul gt     lt li class  nav-item   ngClass     active   active tab   manage    gt  x000D   lt a routerLink   main organization manage   click   activemenu  manage    gt   lt i class  la la-building-o  gt  lt  i gt  x000D   lt p gt Manage lt  p gt  lt  a gt  lt  li gt   x000D   lt li class  nav-item   ngClass     active   active tab   assignservice    gt  lt a routerLink   main organization assignservice   click   activemenu  assignservice    gt  lt i class  la la-user  gt  lt  i gt  lt p gt Add organization lt  p gt  lt  a gt  lt  li gt  x000D   lt  ul gt  lt  div gt  x000D   x000D   x000D    Code is good example of ngClass if else condition     ngClass    active tab   assignservice     active tab   manage    show        ngClass     active   active tab   assignservice

User · Answer

Not relevant with  ngClass  directive but I was also getting the same error as     Cannot read property  remove  of undefined at      and I thought to be the error in my  ngClass  condition but it turned out the property I was trying to access in the condition of  ngClass  was not initialized   Like I had this in my typescript file  element   type  string     and In my  ngClass  I was using   ngClass     active   element type      active      and I was getting the error     Cannot read property  type  of undefined at      and the solution was to fix my property to  element   type  string     type   active      Hope it helps somebody who is trying to match a condition of a property in  ngClass

User · Answer

ngClass      instead of  ngClass     is only for the shorthand syntax for structural directives where you can for example use   lt div  ngFor  let item of items  gt   item   lt  div gt    instead of the longer equivalent version   lt template ngFor let-item  ngForOf   items  gt     lt div gt   item   lt  div gt   lt  template gt    See also https   angular io docs ts latest api common index NgClass-directive html    lt some-element  ngClass    first second   gt     lt  some-element gt   lt some-element  ngClass     first    second    gt     lt  some-element gt   lt some-element  ngClass     first   true   second   true   third   false   gt     lt  some-element gt   lt some-element  ngClass   stringExp arrayExp objExp  gt     lt  some-element gt   lt some-element  ngClass     class1 class2 class3    true   gt     lt  some-element gt     See also https   angular io docs ts latest guide template-syntax html    lt  -- toggle the  special  class on off with a property -- gt   lt div  class special   isSpecial  gt The class binding is special lt  div gt    lt  -- binding to  class special  trumps the class attribute -- gt   lt div class  special        class special    isSpecial  gt This one is not so special lt  div gt         lt  -- reset override all class names with a binding  -- gt   lt div class  bad curly special        class   badCurly  gt Bad curly lt  div gt

User · Answer

That s the normal structure for ngClass is    ngClass     classname    condition     So in your case  just use it like this      lt ol class  breadcrumb  gt     lt li  ngClass     active   step    step1     click   step  step1   gt Step1 lt  li gt     lt li  ngClass     active   step    step2     click   step  step2   gt Step2 lt  li gt     lt li  ngClass     active   step    step3     click   step  step3   gt Step3 lt  li gt   lt  ol gt

User · Answer

Try Like this    Define your class with      lt ol class  breadcrumb  gt       lt li  ngClass    active   step    step1     click   step  step1     gt Step1 lt  li gt       lt li  ngClass    active   step    step2      click   step  step2   gt Step2 lt  li gt       lt li  ngClass    active   step    step3     click   step  step3   gt Step3 lt  li gt   lt  ol gt

User · Answer

This is what worked for me    ngClass     active   dashboardComponent selected menu     profile

User · Answer

You can use ngClass to apply the class name both conditionally and not in Angular  For Example    ngClass    someClass   gt    Conditional   ngClass     someClass   property1 isValid   gt    Multiple Condition    ngClass     someClass   property1 isValid  amp  amp  property2 isValid   gt    Method expression   ngClass   getSomeClass      This method will inside of your component   getSomeClass            const isValid this property1  amp  amp  this property2          return  someClass1 isValid   someClass2 isValid

[javascript] Angular: conditional class with *ngClass

Examples related to javascript

Examples related to css

Examples related to angular

Examples related to angular-template

Examples related to angular-ng-class