Multiple conditions in ngClass – Angular 4

by

You are trying to assign an array to ngClass, but the syntax for the array elements is wrong since you separate them with a || instead of a ,.

Try this:

<section [ngClass]="[menu1 ? 'class1' : '',  menu2 ? 'class1' : '', (something && (menu1 || menu2)) ? 'class2' : '']">

This other option should also work:

<section [ngClass.class1]="menu1 || menu2" [ngClass.class2] = "(menu1 || menu2) && something">

More Related Contents:

  1. Angular 2 innerHTML (click) binding
  2. How do I create a singleton service in Angular 2?
  3. Error:Unable to locate adb within SDK in Android Studio
  4. How to communicate between component in Angular?
  5. Angular 4.3 – HttpClient set params
  6. How can I limit ngFor repeat to some number of items in Angular?
  7. Remove/replace a component’s selector tag from HTML [duplicate]
  8. Apply a directive conditionally
  9. Angular 6 Get response headers with httpclient issue
  10. How can I unit test a component that uses the Router in Angular?
  11. Angular 2, DomSanitizer, bypassSecurityTrustHtml, SVG
  12. Angular 2 filter/search list
  13. Application becomes unresponsive after encountering an exception
  14. Angular 6: saving data to local storage
  15. ctorParameters.map is not a function in angular2-mdl
  16. How to set environment via `ng serve` in Angular 6
  17. How to make an http call every 2 minutes with RXJS?
  18. View is not updated on change in Angular2
  19. Debug & Run Angular2 Typescript with Visual Studio Code?
  20. How to “communicate” between components in Angular?
  21. How to specify locale thousand separator for number pipe in Angular 4
  22. Parameter in to Animation Angular2
  23. Angular – two subscriptions in ngOnInit result in object ‘undefined’
  24. Do I have to unsubscribe from ActivatedRoute (e.g. params) observables?
  25. What is the difference between @Inject vs constructor injection as normal parameter in Angular 2?
  26. What is the lifecycle of a service in Angular 5
  27. Conditionally apply click event in Angular 4
  28. ::ng-deep going to be deprecated – Any alternatives?
  29. Firestore Error: The query requires an index
  30. Do we need to unsubscribe from observable that completes/errors-out?

Leave a Comment