7293

Angular 6 NgClass change css class which is in the tag

Question:

I have a CSS file looking like this:

<pre class="lang-css prettyprint-override">aside { .myClass { ul li { color: black } } } .myClass2 { ul li { color: white } }

And I want to use [ngClass] to dynamically change these CSS classes and have different colors. I have tried this

[ngClass]="{'myClass': value==='option1', 'myClass2': value=== 'option2'}"

But it's not working.

<pre class="lang-css prettyprint-override">aside { background-color: white; min-height: 100%; padding-top: 10px; width: $aside-width; box-shadow: 0 3px 2px rgba(0, 0, 0, 0.16); .sidebar-logo { margin-top: 20px; a { font-size: 35px; font-weight: bold; transition: 0.3s; opacity: 1; cursor: pointer; &:hover { opacity: 0.5; } } } .nav { width: 100%; } .links { display: flex; flex-direction: column; align-items: center; margin-bottom: $flags-height; ul li { a { color: $gray-dark; padding-left: $aside-primary-padding-horizontal; font-size: 1.5rem; display: flex; align-items: center; &:hover, &.active { background-color: $primary; color: white; i { margin-right: 20px; color: white; } } i { margin-right: 10px; font-size: x-large; color: $primary; padding-right: 10px; transition: 0.3s; } } } } .links2 { display: flex; flex-direction: column; align-items: center; margin-bottom: $flags-height; ul li { a { color: $gray-dark; padding-left: $aside-primary-padding-horizontal; font-size: 1.5rem; display: flex; align-items: center; &:hover, &.active { background-color: red; color: white; i { margin-right: 20px; color: white; } } i { margin-right: 10px; font-size: x-large; color: red; padding-right: 10px; transition: 0.3s; } } } } <pre class="lang-html prettyprint-override"><aside *ngIf="visible" [ngClass]="{'links aside': message === 'NORMAL', 'links2 aside' : message === 'LIGHT' }"> <div class="links"> <div class="sidebar-logo"> <a (click)="goToHomePage()"> CRM </a> </div> <hr class="horizontal-divider" /> <ul class="nav side-menu"> <ng-container *ngFor="let page of pages"> <li *ngIf="page.visible"> <a routerLink="{{page.URL}}" routerLinkActive="active"> <i class="{{page.ICON_CLASS}}"></i> <span class="text">{{page.VALUE + '.SIDEBAR_TITLE' | translate}}</span> </a> </li> </ng-container> </ul> </div> <div class="footer"> <div class="version"> v. 0.2.0 </div> </div> </aside>

In my example I want to use class links and links2.

Answer1:

Try this,

[ngClass]="{'aside': true, 'links': message === 'NORMAL', 'links2' : message === 'LIGHT'}"

Recommend

  • Module.DEFAULT_REFLECTOR not initialized
  • Row based chart plot (Seaborn or Matplotlib)
  • Python interpolate not working on rows
  • Scikit-learn (sklearn) PCA throws Type Error on sparse matrix
  • iOS/Objective C: Converting RGB Data to UIImage
  • Use WPF object to 'punch' hole in another?
  • Setting inner div opacity to 1, but not effected
  • Putting text shadow on a UIButton text label
  • Change Font Style (bold, Italic, bold italic) in C# [duplicate]
  • Android MapView parts of map missing
  • What's the logic in HKObserverQuery background delivery?
  • How to vertically and horizontally center a div of unknown height
  • adding item to window Extjs 4
  • WP7 - read from CSV file? Or what to do with the data?
  • Why does PHP appear to evaluate this condition incorrectly?
  • Animating an SVG Group
  • Unity 5.1 Animator Controller not transitioning
  • Spring Web Flow exception handling
  • Multibinding Multiselection ListView
  • css calendar - td background diagonal split - two colors
  • Custom Nav Title offset ios 11
  • Formatting a text in a table cell with PHPWord e.g. bold, font, size e.t.c
  • Selectively hide background elements when overlayed with transparent div
  • cell spacing in div table
  • Cut the background to expose the layer below
  • Understanding RTF and edit it with vb.net
  • Jquery Mobile pageLoading() Method how does it work?
  • Floated image with variable width and heading with background image
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • How to modify the colors in the legend of a plot using a fill gradient?
  • Mysterious problem with floating point in LISP - time axis generation
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Highlight and Bold text in JTextPane
  • Change multiple background-images with jQuery
  • Xamarin Forms - UWP Fonts
  • Android screen density dpi vs ppi
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Change an a tag attribute in JavaScript based on screen width
  • Unanticipated behavior