All Questions
Tagged with angularjs-ng-class or ng-class
938 questions
1
vote
1
answer
1k
views
Angular Material Theme - Selector on BODY tag
I have an application developed in Angular with Material components. I'm using Material Theme to have a few different themes to my app (Dark, Light, Colorful).
My main component - app.component html ...
- 9,991
0
votes
1
answer
2k
views
How to apply a single style to the selected element within an *ngFor?
within my angular application, I'm going through the following array of objects to display my elements on the screen
[{
"name": "Equipment",
"functional_id": "furniture",
"products": [
{
...
- 865
2
votes
1
answer
1k
views
dynamic css class on a span element - angular 7
I have a span element in ngx datatable. I want to change the css class dynamically based on the value.
Here's my html code:
<ngx-datatable #orderinvoice class="bootstrap" [rows]="invoiceSource" [...
- 1,061
-3
votes
1
answer
1k
views
Ngclass function with 2 objects
is it possible to add 2 objects to an ngclass function like
<div class="progress-bar"[ngClass]="getProgressValues(obj.val1,obj.val2)"> </div>
i get a Json error.
SyntaxError: JSON....
- 39
1
vote
2
answers
1k
views
Which way has the best performance applying several classes to html tags? Angular 2
I am building a calendar with prices, I have 3 nested elements:
- calendar-layout
-- calendar-month
--- calendar-week
In the calendar-week I have to do several calculations for the different styles ...
- 755
0
votes
4
answers
9k
views
Angular - NgClass, multiple conditions
I'm looping over an array that contains a varying amount of percentages. However, I would like to add classes based on if an answer from the database equals one of the values from the array.
The ...
- 87
0
votes
2
answers
2k
views
setActive ngClass angular
Hi i have a problem with a simple angular component, i'm using a reactive form to insert text then i loop the text by using ngFor after i want to set active one element by click but when i click one ...
- 159
1
vote
1
answer
657
views
How do I force [ngClass] to re-evaluate a function?
Angular v8. I have a tag that uses the [ngClass] directive. The expression calls a function. How do I get ngClass to re-evaluate said expression after conditions have changed? It only seems to be ...
- 133
0
votes
1
answer
95
views
ng-class does not take effect until the element is not hovered
I have the following code:
<span data-toggle="collapse" data-target="#some-id">
<span class="glyphicon" ng-class="ctrl.test() ? 'glyphicon-minus-sign':
'...
- 23
1
vote
2
answers
2k
views
Using ngClass to update p-calendar input
I do not want the user to select a future date, but if he/she does, I want to display a red border around the p-calendar's input field.
My css code:
.invalid-date ::ng-deep>p-calendar>.ui-...
0
votes
1
answer
43
views
No NgClass reaction to the function
I use a function in NgClass that uses an array filled in ngOnInit.
ngOnInit -> prepareRezerwation() create colorRezerwation veriable:
this.nodeService.getRezerwations(this.minMax).subscribe(...
- 1
0
votes
1
answer
651
views
How to manage component status with observables in Angular
Context
In an Angular project, I have made a component to encapsulate the logic of a submit request page (code below).
This page has two subcomponents that define specific forms (firstForm and ...
- 3,733
1
vote
3
answers
304
views
ngClass one conditional and other from variable
I have the following data structure:
this.filters = [
{
key: 'filter1',
active: true,
class: 'filter1Class'
},
{
key: 'filter2',
active: false,
class: 'filter2Class'
...
- 3,758
-1
votes
1
answer
229
views
ng-class not updating after the value change in ng-repeat angularjs
I am trying to set an active class based on the value in ng-repeat. I am able to achieve it on the first-page load based on the default but whenever the value is changed the class is not changed. I am ...
- 541
1
vote
2
answers
499
views
Add ng-class attribute to root element of angularjs directive
I hav a directive that looks roughly like this, with an ng-class in the template:
module.directive('myDirective', [function() {
return {
restrict: 'E',
template: `<div ng-class=...
- 17.1k
-1
votes
1
answer
659
views
Angular8 - [ngclass] performance Issue
I am using [ngClass] to choose css class based on material table row value. On mouse over event I am changing flag value which fetching cssclass and which is working fine. But when I am debugging it I ...
0
votes
1
answer
454
views
apply ngclass in mat-cell getting error angular 8
I am trying to use ngclass for my condition to apply css for the below html code but it was showing error.
I want to use two class that is colorRed & colorOrange
Here is my Two class (CSS)
...
- 1,503
0
votes
1
answer
39
views
The output of the below code should be in green color, for h2 tag but it in normal black , Why?
Angular Code Green color not appearing
app.component.css
.text-success{color:green}
app.component.html
<h2 [ngClass]='borde'>Hello World</h2>
app.component.ts
showColor:true
public ...
- 54
0
votes
1
answer
249
views
how to add a class dynamically? [duplicate]
I've been programming in Angular for a short time and I got stuck on the button design.
I have already implemented them with an ngIf, appearing and disappearing dynamically depending on whether they ...
- 865
0
votes
1
answer
302
views
Angular reference id in ngClass best practices
I made this code to change the css of the nav-bar options when the active page changes.
html:
<ul>
<li routerLink="/" id="homePage" (click)="selected($event)"
[...
- 612
0
votes
3
answers
1k
views
change menu status to active in angular 8
I am new in angular I am trying to change the state of my button in the navbar, taking into consideration the navigation route, however when clicking my button I select all the other buttons including ...
- 57
4
votes
2
answers
3k
views
How to mix conditions and concatenation in [ngClass]
I have a div which needs to be blurred/reduced opacity on mouseenter.
I've created 2 css class called .blur and .less-opacity
Component.css
.blur {
-webkit-filter: blur(10px);
-moz-filter: ...
- 553
0
votes
1
answer
3k
views
Ionic 4 basic ngClass not working as expected [duplicate]
Might be a beginners question but I'm really stuck here. Just trying to toggle the class of an element I added to my HTML like this:
<ion-card [ngClass]="{
'inactive': step2Inactive,
'button-...
- 601
0
votes
1
answer
428
views
Angular [ngClass] directive not working on scroll event
I'm using Angular 8 and bootstrap 4 to build a navbar which changes its color from transparent to dark when a certain amount to scroll happens. I'm using [ngClass] directive in order to achieve it. ...
- 161
-1
votes
1
answer
5k
views
How to set condition in ngstyle or ngclass
I have 2 different pages which is going to display the same data and both are sharing the same components. But both pages has different resolution one is the size with the alert box and one is ...
user12106800
0
votes
3
answers
915
views
How to apply css class based on condition that char length > 128
This is angular app, I want to apply css class based on condition that char length of variable is greater than 128 char. I was inspired by this post enter link description here. As shown below in the ...
- 2,769
-1
votes
1
answer
92
views
Angularjs: Performance using ng-class
This is a dummy coding that describes my problem
HTML
<div ng-class="{'test': isAllowed }" id='example1'>Example 1</div>
<div ng-class="{'test': isAllowed }" id='example2'>Example 2&...
0
votes
1
answer
226
views
AngularJs dynamic styling using ng-style
I am using below syntax but I am not able to implement it. I want to change margin-left dynamically, depending on the div class.
ng-style="{ 'margin-left: 120px' :col-xs-12 || 'margin-left: 400px' :...
- 315
0
votes
1
answer
1k
views
Modify CSS parameters of Breadcrumb leaf with ngClass in Angular
I am developing a Breadcrumb component in Angular which will show the complete address about the routing. Helping the user to go back to any step it was before. To get the actual url I am using ...
- 402
2
votes
1
answer
3k
views
Can I use conditional (ternary) operator in [ngClass] alongside with multiple class conditions in Angular2?
I can use multiple conditions like that:
<div [ngClass]="{'checked': isChecked, 'disabled': isDisabled}">
And conditional (ternary) operator like that:
<div [ngClass]="isEmpty ? 'empty-...
- 625
1
vote
0
answers
246
views
How to disable the <ul> tag using ng-class?
I have a div structure like follows,
<ul data-ng-class="{'dropDownDisabled': (items.results && items.results.disabled) }">
<li
class="dropdown-item org-labels"> {{...
- 407
0
votes
5
answers
854
views
How to create a global ngClass method in Angular?
Using Angular 7, I have created an ngClass method in my component .ts file and works great.
What I want is to use that same method in all my components without re-writing the code, but I'm not sure ...
- 1,882
2
votes
2
answers
100
views
How to avoid repetitions within Angular ngClass?
Imagine following situation:
<div *ngFor="let d of dm; first as first">
<span
[ngClass]="{ cSmall: !first, cGray: !first, cTab1: !first }"
>
{{ d }}
</span>
...
user3025289
0
votes
1
answer
937
views
How to avoid using function in ngStyle or ngClass?
This is an annoying issue if I can say so ... If I use a method in the template, this will be called so many timesss.... due of the change detection of Angular.
3511 messages (method calls) in just ...
- 2,598
0
votes
1
answer
1k
views
change pointer using ngClass
I'm adding and removing class using ngClass. I want to change pointer. My html code of the component
[ngClass]="{'zoom-cursor': cyClass}"
I have a boolean called cyClass in the corresponding ...
- 3,918
1
vote
2
answers
266
views
facing problem on using ngClass for multiple options
I am using reactive form using FormBuilder in Angular 8 Application ,
where i am using ngClass for multiple option
I am sharing some part of my code
<input [ngClass]="{(name.valid)?'...
- 137
3
votes
1
answer
11k
views
Angular Material Navigate rows using up and down arrow key
I added a custom ngclass to my mat-table to to make the rows clickable. but now I would like the user to be able to navigate using the up and down arrow keys. using this git hub as a reference(https://...
- 1,014
0
votes
2
answers
3k
views
Angular ngClass background color change with condition
I use this part of code to change the background color of a cell when register.day is equals to 'NO REG.':
<td class="text-center" [ngClass]="{'red': register.day1 == 'NO REG.'}"> {{register....
1
vote
2
answers
4k
views
Change color of element in table [ng-class] based on a condition
I'm stuck and I need some help.
I have a table with column name deadLine.
The data came from MySQL and is DATETIME properties. I've created a function that checks if the date in the column has ...
- 207
0
votes
1
answer
1k
views
How to change the background of of MatSelect using ngClass?
I'm trying to change the background color of my mat-select option or the div container using ngClass in Angular 8 whenever I changed the value, followed the documentation and some samples but they ...
- 127
0
votes
1
answer
322
views
How to change tabset nav-pills background colour using [ngClass] or customClass
I am using angular-7,
I want to change the colour of tab depending on the validation, i have added customClass where i am checking if timesheet is valid or not, if it is invalid i want to change the ...
0
votes
2
answers
349
views
Angular 1 ng-class doesn't work as expected
I have a simple ng-class that switches two classes based on the condition. When the class is switched, the order of the classes is messed up not sure why. Has anyone a solution for this?
<div ...
- 113
1
vote
3
answers
14k
views
Angular: Check if element has a class and add a class to another element
How can I check with Angular if a DOM element has a class and then add a class to another element?
My Template:
<div class="d-table">
<ui-switch class="d-table-cell">
<span ...
- 3,042
1
vote
1
answer
2k
views
ngClass - apply multiple classes from variables?
I'm trying to apply multiple classes through ngClass. No conditions.
I have 2 variables that is a string of the class name.
Passing in one variable is easy enough
[ngClass]='variable1?.font'
I tried ...
- 137
0
votes
1
answer
220
views
Change the background color of an image which is showed by ngFor bucle
I've done a request to Itunes Api to show the results of the database. The request is with and input, where I can write a word and the Api returns me all the music/tracks/artists/albums which match ...
2
votes
3
answers
1k
views
How to use ngClass with css?
I have a css code that looks like this:
:host >>> a.ng2-smart-sort-link.sort::after {
content: '';
right: 0.75rem;
position: absolute;
display: inline-block;
...
- 95
31
votes
5
answers
104k
views
How to use if-else condition with [ngClass] in angular 7? [duplicate]
I want to use multiple classes inside Angular [ngClass].
I have two classes, It should work accordingly as per the condition of the flag, that are already passed from the component.ts.
- 331
2
votes
2
answers
1k
views
ng-class to compare string
I need to set green dot class if the person is available and set red dot if the person is busy. "available" or "busy" is a string which will be the response from API. I tried to set the class using ng-...
- 123
0
votes
1
answer
40
views
how to handle conditional ng-class
I have a html format like this , when sec.newValue is not empty I want it to be displayed bold and if its empty , I want to display as it is. so how can I achieve this using ng-class,i tried giving ...
- 697
-1
votes
3
answers
515
views
ngClass doesn't evaluate
When ngClass is used in Object - keys manner it does not evaluate right. For example if I have in html:
<div [ngClass]="{'cbold': bold, 'citalic': italic, 'cunderline': underline}">Some ...
- 351