All Questions
Tagged with angularjs-ng-class or ng-class
938 questions
2
votes
2
answers
87
views
ngClass has the wrong value while hydrating
The below [ngClass] expression doesn't insert the class name into DOM when Angular starts hydrating (only after it's finished).
<div class="document-pane" [ngClass]="{'single-view-...
- 322
1
vote
1
answer
532
views
Using Angular Signals with classes
I have found some behaviour that I can't understand. If I've got a bunch of styles applied like this:
.monkey-ion-item{
// Country Variant XXXX Not working after upgrade!
&.monkey-variant-...
- 1,733
1
vote
2
answers
70
views
Using ng-class to remove in Angular
I'm using ng-class to add a disabled class to a CTA in certain scenarios, but there is a split second delay before it gets applied, which means if the user is quick enough they can click the CTA. See ...
- 21
1
vote
1
answer
105
views
ng-class does not update on variable change using tailwindcss styles
I use Angular 18 and TailwindCSS. I wanted to create a cool typing animation with different colors per word. However, when currentColor updates to the next tailwind color, it does not show the proper ...
- 11
1
vote
1
answer
112
views
Angular directive css class selector is not working when class added by ngClass directive
Angular directive css class selector is not working when class added by ngClass directive.
This is my code example and I will also add playground at link
@Directive({
selector: '.test',
standalone:...
- 11
0
votes
1
answer
112
views
Changing validations of a select field dynamically in Angular
I am encountering an issue with my Angular application where I'm dynamically changing the required attribute of a select field in a form after it has been submitted.
evaluations.component.html
<...
- 145
0
votes
3
answers
847
views
ngClass does not switch value when using object in component
When I use the following code to switch the class everything works fine
<p [ngClass]="idPresent ? 'alert alert-success' : 'alert alert-danger'">
Working
</p>
On changing the ...
- 2,263
0
votes
3
answers
100
views
My NgClass is not being applied to the element
<mat-dialog-content class="mat-typography">
<div *ngFor="let form of addEmpForm; let i = index" class="example-container" [ngClass]="{
'example-...
- 7,675
1
vote
0
answers
93
views
Want to change background color of cell based on value of variable in mat table angular
I am using angular material and in that using mat-table.
Now I want to change background color of cell based on value of variable.
So if value is >50 then it should show yellow color OR show green ...
- 326
1
vote
1
answer
124
views
How do I shift my [ngClass] conditions into a separate ts file as a reusable code across all components, instead of repeating it in every html file?
Currently I have my codes working. However, my [ngClass] conditions are very bulky. Having it repeated in many components in the html makes it difficult to maintain if any change is needed and makes ...
- 13
0
votes
3
answers
968
views
How to change color of text in a table cell based on value in Angular?
I have the following table where the ESTADO field is a drop-down list that shows the possible statuses. I want the text of the td element of the ESTADO field to display a different color when entering ...
- 137
1
vote
1
answer
709
views
Angular 10 PrimeNG ngClass
I'm currently stuck with an issue on the Ternary operator, so I have this code:
[ngClass]="am.hasAssignmentRequiredData(bal) && am.isDirty(bal) ? '':'disable'"
so what this does is ...
- 21
1
vote
1
answer
485
views
use ngClass for styling matautocomplete
I'm trying to style a mat-autocomplete element with ngClass and I can't get it to work!
In my CSS I wrote:
::ng-deep .default .mat-autocomplete-panel {
background-color: white !important;
border:...
- 63
0
votes
0
answers
59
views
Angular9 Exception: Can't bind to 'ngClass' since it isn't a known property of 'input' [duplicate]
Can't bind to 'ngClass' since it isn't a known property of 'input'.
I have migrated the angular project from version 8 to 9 and facing this type of errors.
src/app/components/header/header.component....
0
votes
1
answer
2k
views
Unable to use ngClass with ng-container to build table, Angular
I have a generic table component and I want to make the row hoverable by binding class using ngClass to a ng-container. However I an error.
The code:
<ng-container *ngFor="let row of manager....
- 952
0
votes
1
answer
45
views
Using ngClass within expressions in ngFor Angular
I want to make a filter. I have a title field and a count field. In the title field, I select the product, then I select the parameter for the filter in the checkbox. The count field should contain ...
- 306
0
votes
1
answer
42
views
Angular ngClass value from component
I have the following codes for my [ngClass]. What I want is consultant-rating-selected-1 + iconLanguage where by the iconLanguage was pass from the component itself. Eg. consultant-rating-selected-1_A....
- 85
0
votes
4
answers
817
views
Creating angular pipe using enum values
I want to create a pipe using enum values to show me text colors depending on the status.
this is my enum class :
export enum Status {
Active = 'Active',
None = 'None',
Processing = 'Processing'...
0
votes
1
answer
370
views
Change Color Dynamically for specific data inside a loop
I have a table that I fill with data . I am trying to color data for the first year column.
I am trying to achieve:
+--------+------------+------+------+
| YEAR | 2022 | 2021 | 2020 |
+--------...
-1
votes
2
answers
59
views
Angular ngClass boolean dont detection
I have an icon "fa-duotone fa-rotate-right", and I want when changing "loading = true", the class "fa-spin" is added, everything works ok, but when it becomes "false&...
- 35
0
votes
2
answers
107
views
Applying an ngClass on only 1 element of a table in angular
In my table, I'm attempting to add a read more button to each row that has a paragraph. The button is displayed for each row, and when I click one, it operates concurrently for each row.
Here is my ...
- 165
1
vote
0
answers
181
views
ngClass with method returning true,false and null
HTML
enter code here <div>[ngClass] = "{'red-color' : colorChanged() === true,
'green-color': colorChanged() === false,
'black-color': colorChanged() === null }&...
- 11
2
votes
1
answer
64
views
How to change the appearance of blocks located in ngFor?
I have an article-map component. In it, with the help of the ngFor directive, I display brief information about the articles. I call the "article-map" component in the "feed" ...
- 31
0
votes
0
answers
1k
views
What the best way to pass ngClass to child component without touch the main component
I'm looking for the best way to pass ngClass or ngStyle to a subcomponent but without apply to the main component.
For example:
I have a component "button" that I call in app.component.html
&...
- 91
0
votes
1
answer
974
views
How to adjust the arrow icon in a dropdown menu when the user clicks outside in angular?
How to control the icon direction when click outside (empty space)?
-fa-angle-up when the user open the dropdown
-fa-angle-down when the user close/default the dropdown
here is stackblitz
- 67
1
vote
2
answers
223
views
Angular: NgClass - Grouping conditions
Is there a way to simplify this ngClass?
edit ? - This one works fine
value === - This is a child component. Each of the two parent components pass the value property down as an @Input. Child ...
user8836786
1
vote
3
answers
1k
views
Angular ngFor - Change CSS of the selected row instead of all rows
This is my code:
TS:
selRow: boolean = false;
HTML:
<tr *ngFor="let user of users" [ngClass]="selRow ? 'selRow' : ''">
<td class="checkbox-field"><...
- 842
0
votes
1
answer
739
views
using ngClass with bootstrap class as conditional screen size breakpoint detector
good day developers...is possible to apply ngClass with the use of bootstrap class related to detection of screen sizes responsivnes.
Lets say i would like to apply an specific class to my template ...
- 1,295
0
votes
1
answer
103
views
how can i selected a button to select a size for a shopping cart app using angularjs
this is my code in controller
$scope.status = false;
$scope.clickOn = function () {
if ($scope.status == false) {
this.status = true;
} else {
this.status=false;
}
};
here ...
0
votes
1
answer
236
views
Angular - How can I move ngClass logic from template to ts file?
In Angular application I am using dropdown filters for user selection. I have add logic in ngClass
<div [ngClass]="i > 2 && 'array-design'">
How can I move the ...
- 301
-1
votes
2
answers
649
views
How can we write two ngClass in one div? [duplicate]
Can we add two ng-class in one div?
If so then how to write it.
How can we write this together?
Thank you in advance.
<div [ngClass]={'white-background': policy number.length <=0}
[ngClass]=&...
- 21
0
votes
1
answer
194
views
Angular <p> displayed by *ngFor won't float to the right
I have this chat in which I'm trying to apply styles to the "chat-container".
The messages are displayed with Angular's *ngFor as follows:
<p *ngFor="let m of messageArray" [...
user18277059
0
votes
1
answer
101
views
AngularJS ng-class updating content
I've got some code in AngularJS here working half percent (I will explain) :
<button ng-class="{'svgMinus-dark': isDarkTheme, 'svgMinus': !isDarkTheme}"></button>
I also tried ...
- 107
0
votes
0
answers
553
views
Angular 13: ngClass not working after ng build
I have a little problem with the mat table especially with the mat row.
What i want to do: Add class "is-marked" if the row has an date.
<mat-row [class.is-marked]="row.date &&...
0
votes
1
answer
961
views
Assigning background-color & border-color to buttons dynamically in angular
I have an array of colors,
colors = ['red', 'green', 'blue', 'yellow', 'black']
Also, I have an array like this
demo = ['de1', 'de2', 'de3', 'de4', 'de5', 'de6', 'de7', 'de8', 'de9', 'de10', 'de11', '...
- 5
0
votes
0
answers
41
views
can't getting same in child component
should get same result from parent component to child component in angular. ngclass giving not exact result in child component. Need correct format of it.
[ngClass]="{
'card-color'...
0
votes
1
answer
88
views
angular - how to combine few ngclass together in one div
I would like to combine multiple ngClass if else statement together, I have tried but not able to resolve it.
<div
[ngClass]="[tabItem === 'unavailable' ? 'background-grey' : selected ? '...
- 71
-1
votes
1
answer
269
views
How to toggle the color of multiple icons when we click on the icons in angular
I have 8 icons and I have to change the color to black from white when we click on the icon(It has to be toggle).
Note: At a time only one icon should be active (change the color).
.component.ts
<...
- 39
-1
votes
1
answer
667
views
How to change the color of the font icons when we click on the particular icon in angular
In my angular application I have 10 icons and my requirement is to change the color from white to red when we click on the one icon among the 10 icons.
And if we click on another icon it will turned ...
- 39
-1
votes
2
answers
234
views
How can i use string interpolation in ngClass in Angular 11?
How can achive it that the class name will be forexample "table1-RED" According to color property.It has color property.(I use not the base material table and this has color property of ...
- 15
0
votes
1
answer
29
views
Why ngClass is failing in a case where the evaluated property is repeated in the following case?
I made a reusable input in the form of a component, I used ngClass to set different backgrounds. and it works well in 4 out of 5 scenarios. There's a case where the evaluated variable named "...
- 489
0
votes
2
answers
1k
views
How to remove style on click of a button
I have a button which is inside an ngFor loop. I am styling it like this.
<div *ngFor="let component of componentList;let index =index">
<button type="button" id='...
- 802
4
votes
2
answers
6k
views
How to use TailwindCSS3 with ngClass?
I'm trying to use TailwindCSS in function inside ngClass.
TailwindCSS classes were generated in function to maintain my template but it doesn't work.
Please check my code below
*.component.html
...
&...
- 109
0
votes
3
answers
764
views
Angular: How can I change the value of a property of a component inside an ngFor
Inside an ngFor I have a tabs component. To add a CSS class I use the property show which is a boolean false. If I click the component the show property toggles to true. If I click a second component ...
- 5,803
0
votes
3
answers
8k
views
How to set different css class based on screen size in Angular?
I have this floating button in my Angular Application,
<button [ngClass]="{
'mdc-fab--extended': extendedClass,
'mdc-fab--mini': miniClass
}" class="mdc-fab mdc-fab--touch &...
- 345
0
votes
3
answers
649
views
ngClass combining multple conditions?
How do I combine multiple conditions in Angular? im using angular 12 at the moment.
example:
[ngClass]="condition1 ? 'className1': 'classname2'"
this works if condition 1 is true or false.
...
- 313
0
votes
2
answers
782
views
dynamic class binding not working in angular 9
I need to display dynamic color for a div based on some condition. I am getting console error.
I have tried
<div [ngClass]="{'clr-{{students.rollNo+1}}': students.active}"></div>
...
- 1,145
-1
votes
1
answer
1k
views
using Ngclass with obervables
Im wondering what is best practice when observables for authentication.
I havesections of my code where different code needs to be rendered if the user is logged in og not.
Currently im using "*...
- 41
-1
votes
1
answer
468
views
How to find min , max value on array and how to change color text for min value green color and max value red color using angular
I have the JSON like below but I have a lot of data:
items: [ { itemId: "22222", category: 'A', total: 100, price: 20 }, { itemId: "666666", category: 'A', total: 80, price:10 }, { ...
- 25