Stack Overflow
Stack Overflow

Questions tagged [angular-ng-class]

48 questions
792
votes
22 answers

Angular: conditional class with *ngClass

What is wrong with my Angular code? I am getting the following error: Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass
  1. Step1
    2. daniel
    • 28,673
    • 36
    • 87
    • 145
66
votes
7 answers

Difference between [ngClass] vs [class] binding

What is the difference in Angular 2 between the following snippets:
65
votes
8 answers

Angular ngClass and click event for toggling class

In Angular, I would like to use ngClass and click event to toggle class. I looked through online but some are angular1 and there isn't any clear instruction or example. Any help will be much appreciated! In HTML, I have the following:
Steve Kim
  • 4,396
  • 8
  • 39
  • 82
10
votes
2 answers

ExpressionChangedAfterItHasBeenCheckedError with ngClass

I have two anchor tags
4
votes
2 answers

How to add CSS class name from variable in Angular 9 depends on boolean variable?

I want to add class names from a variable, but it's depends on another variable in Angular 9. Here is my TypeScript code export class InputComponent implements OnInit { @Input() inputBlockClass = 'col-12 d-flex px-0'; @Input()…
netdjw
  • 3,842
  • 11
  • 50
  • 101
3
votes
1 answer

Angular2 [ngClass] Conditional fails with Spaces

I have an ngClass conditional that functions fine on class names without spaces, but when i try to do something like below and i toggle isTrue on button click, the class changes from "btn btn-primary" to "btn-default". The space in there seems to be…
Monzingo
  • 301
  • 1
  • 5
  • 15
3
votes
2 answers

ngClass is not working like it should

I'm playing around with ngClass, and I do not know what I am doing wrong. It is showing weird behavior. It seems like when I assign a function to ngClass it does not work, but if I assign it an object literal it works. How can I get ngClass to work…
WShell
  • 58
  • 7
3
votes
2 answers

Apply ng-class only on the element that was clicked on

I want to apply the ng-class only on the button/element that was clicked on, how would I do that? JS file: var classApp = angular.module('classApp', []); classApp.controller('classCtrl', function ($scope) { $scope.isActive = false; …
user1158507
  • 31
  • 3
2
votes
2 answers

How to avoid repetitions within Angular ngClass?

Imagine following situation:
{{ d }}
All these CSS-Classes cSmall, cGray, cTab1 are depended…
Lonely
  • 5,174
  • 6
  • 33
  • 67
2
votes
2 answers

ng-class issue with condition in angular?

I have two link which is displaying two different images on click of respective link.first behaviour is fine but when again I click on selected link, image is displaying correct but hover is moving to another link. I mean its displaying second link…
DharamChauhan
  • 109
  • 1
  • 8
2
votes
2 answers

Angular: Errors with passed @Input values to override button text and add class by using ngClass

I've created an angular component called app-button. The template looks like this:
In the controller I have defined two @Input variables called modifier and…
webta.st.ic
  • 3,772
  • 3
  • 34
  • 78
2
votes
2 answers

Change Width of Layout in A Certain Component in Angular

Is it possible that you change the width of your layout in a selected component only? I wanted to change the
only in my login component? Only in login component and not on other components.
Joseph
  • 4,309
  • 11
  • 37
  • 87
2
votes
1 answer

ngClass is not working in angular 4

ngClass directive generating the following error ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngClass' since it isn't a known property of 'li'. code snippet.
  • Binson Eldhose
    • 883
    • 3
    • 12
    • 33
    • 2
    votes
    2 answers

    Angular 2 ng-class not working in IE 11

    I am using angular 2 ngClass for disabling the anchor tag, this is working in google chrome but not working in IE 11. Does any one faced similar issue?
    …
    Kiran Kumar
    • 688
    • 3
    • 10
    • 32
    1
    vote
    2 answers

    routerLinkActive id coupled with [ngClass]

    Below web-link demonstrates the routerLinkActive id working when used as a boolean value for a distinct HTML element' [ngClass] https://stackblitz.com/edit/routerlinkactivesimple?file=src%2Fapp%2Fapp.module.ts In contrast the routerLinkActive id is…
    Caesarius
    • 7
    • 2
    1
    2 3 4