Skip to main content
Stack Overflow for Teams is now Stack Internal: See how we’re powering the human intelligence layer of enterprise AI. Read more >
60 questions
Newest Active Bountied Unanswered
Filter by
Sorted by
Tagged with
0 votes
3 answers
847 views

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 ...
Bagira's user avatar
  • 2,263
0 votes
0 answers
26 views

I,ve been some days I started learning Angular, and now I'm having some troubles (here's the problem) when calling to the *ngForOf directive in a li, can someone help me? pd: In the trouble picture, ...
Alejandro Diaz's user avatar
  • 1
1 vote
3 answers
80 views

I need to use both function and condition in ngClass like below: <div [ngClass] = "i==1 ? 'active':'inactive',getclass()"> </div TS getclass(){ return 'myclassname' }
sridharkctmca's user avatar
  • 15
1 vote
1 answer
486 views

iam listing some images from an array,the current image has a orage border. when the user clicks an image it becomes the current image but on clicking the border from previous current image ...
sinan's user avatar
  • 534
0 votes
0 answers
758 views

I am trying to mimic the behavior of mat-form-field for required validation on ng-select In order to mimic the behaviour I need to add border and color as red when mat-error trigeered. Here is my HTML ...
AMDI's user avatar
  • 1,001
0 votes
2 answers
2k views

I have the following css #auction-history div:after { content: ""; width: 100%; height: 8px; position: absolute; bottom: -8px; background: #bad3e0; left: 0; } ...
someusername12's user avatar
  • 45
-1 votes
2 answers
649 views

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]=&...
aria08's user avatar
  • 21
1 vote
2 answers
3k views

I'm trying to add multiple classes by ngClass, and I'm confused as to why I can't use ternary operator here. <div [ngClass]="{'otherClass': otherFlag, classFlag ? 'class--true': 'class--false'}...
dabrowawojciech64's user avatar
  • 13
0 votes
1 answer
88 views

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 ? '...
user7046311's user avatar
  • 71
0 votes
4 answers
1k views

I'm currently trying to show a list of Pokemons that have a different background color depending on their type. I would like to implement a feature where the border of the selected pokemon also shows ...
Jens Panis's user avatar
  • 99
0 votes
1 answer
798 views

So I am making a todo app and I want to add stroke to the done tasks but the problem is that it is not working properly. my .css file .stroke{ text-decoration: line-through } and the element in ...
Ahmed's user avatar
  • 601
2 votes
2 answers
479 views

I am loading a dynamic table from a JSON file and on td i am using an angular expression to evaluate the css class name based on some application logics The HTML and TS code is like below <td *...
Sebastian's user avatar
  • 4,861
1 vote
2 answers
710 views

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....
Caesarius's user avatar
  • 109
-1 votes
2 answers
836 views

So I have got a parent component with children components binded over an ngFor()such as: <categories *ngFor= "let category of categories" [category]="category"></...
Mateo Randwolf's user avatar
  • 2,902
0 votes
0 answers
893 views

I have built an Angular Material Table and would like to use class error-text if the [dataSource] returns isActive=false. I'm trying to do this with no luck: <table mat-table [dataSource]="...
Janey's user avatar
  • 1,330
1 vote
2 answers
1k views

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 ...
juanjinario's user avatar
  • 755
0 votes
1 answer
873 views

i have disabled several columns in my table and want to display them in different colors. Therefore I wrote a function in Typescript where CSS is changed via the class .disabledRange. I have read that ...
user avatar
0 votes
1 answer
841 views

I have a list of videos coming from api. when play icon of a particular video from table is clicked a modal box opens. I want that when we submit this modal box a spinner starts rotating until it get ...
Neelam Arya's user avatar
  • 1
8 votes
2 answers
10k views

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 = '...
netdjw's user avatar
  • 6,101
1 vote
5 answers
685 views

I have some list elements, which I am rendering using *ngFor directive. However, some part of the list items text should be bold according to the specs. I tried to do this with the [ngClass]="'strong'"...
user avatar
0 votes
2 answers
105 views

I have an expression string from Angular [ngClass] directive containing multiple expressions with their corresponding key separated by a comma. 'background_orange':row.columnname.split(',')[4] == 1,'...
Sharath Chandra's user avatar
  • 5
2 votes
2 answers
100 views

Imagine following situation: <div *ngFor="let d of dm; first as first"> <span [ngClass]="{ cSmall: !first, cGray: !first, cTab1: !first }" > {{ d }} </span> ...
user avatar
2 votes
2 answers
69 views

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 ...
DharamChauhan's user avatar
  • 109
0 votes
2 answers
3k views

Firstly, I am very new to Angular world. Trying to achieve a task. I really appreciate all inputs. Coming to the issue. I am creating multiple expansion panel using a "ngFor". I want to highlight or ...
javalearner's user avatar
  • 11
1 vote
2 answers
6k views

If i click the button it will change the color in to orange but by requirement is after click the same button it need to change into default color. so please guid me to do this. <button #val1 ...
Sudhar San's user avatar
  • 39
2 votes
2 answers
1k views

I've created an angular component called app-button. The template looks like this: <div class="app-button"> <button class="app-button__btn">{{text}}</button> </div> In ...
webta.st.ic's user avatar
  • 5,239
-1 votes
3 answers
2k views

I am trying to change the value of [ngclass] field based on the values present in array but it is not working as expected. The html code is as below: <ul> <li [ngClass]="{...
Suman's user avatar
  • 53
10 votes
2 answers
4k views

I have two anchor tags <ul class="switchNav"> <li [ngClass]="!hidePanel2 ? 'active' : ''"> <a href="javascript:void(0)" (click) ="hideShowPanel(1)">panel 1<...
Md. Parvez Alam's user avatar
  • 4,608
1 vote
3 answers
217 views

After going through a lot of questions , I have decided to ask this... The angular [ngClass] is working weird on the values for 10 , 24 , 100 . I don't know the reason behind it . Hoping you could all ...
Mayank Agarwal's user avatar
  • 33
-1 votes
1 answer
222 views

I have the following html snippets <ul> <li *ngFor="let report of searchResult.reports let i = index;"> <input type="checkbox" [(ngModel)]="report.reportChecked" (click)="...
yugrac's user avatar
  • 73
1 vote
0 answers
49 views

Background I have a header component having [ngClass] attached to top div. Question Is it possible to delay displaying of page until [ngClass] has been evaluated? We used to have ng-cloak in ...
shobhit vaish's user avatar
  • 950
0 votes
1 answer
2k views

I am trying to dynamically set the class of my image in my template depending on which image is clicked. I have used this precisely as shown in the past and it worked then but is not working in this ...
koque's user avatar
  • 2,306
0 votes
1 answer
896 views

I am using ngClass (Angular 2) to load a string of classes if condition is true and other string of classes if the condition is false! Here is the code: <label [ngClass]="{'btn btn-success m-btn ...
Khuram's user avatar
  • 1,860
1 vote
0 answers
836 views

I have a component with a TS file that has this section in it: @Component({ selector: 'nav-menu', templateUrl: './navmenu.component.html', styleUrls: ['./navmenu.component.scss'] }) I ...
Starfleet Security's user avatar
  • 1,853
0 votes
0 answers
693 views

The following static html <ul> dropdown (with style included below) works perfectly. Now I'm trying to convert this to an Angular 5 dynamic <li> using *ngFor* and ngClass . <!-- ...
bob.mazzo's user avatar
  • 5,789
0 votes
2 answers
964 views

I'm trying to add 'active' class to all the divs (options in this case) that are clicked and remove the class on a second click. The options count can vary as it's generated by ngFor. HTML <div [...
Akash Agrawal's user avatar
  • 2,299
1 vote
8 answers
27k views

I want to add background color to the li element when clicked but when I clicked another li element the previous li element background color remains unchanged. component.html <div class="col-md-...
Bhaskararao Gummidi's user avatar
  • 1,635
-1 votes
1 answer
3k views

I am following Template syntax section for the application of built-in attribute and structural directives from here https://v4.angular.io/guide/template-syntax#ngclass currentClasses: {}; ...
hugolululu's user avatar
  • 21
0 votes
1 answer
4k views

Here a loop of kpiName is executed and inside loops of subRegion also executed. As a result 4 divs of class="col-xs-2" are created and inside it two div(clickable divs inside filter class) are created ...
Manzer Hashmi's user avatar
  • 73
0 votes
1 answer
632 views

I am using Angular 4+. Please note: first and last needs to be based on the class instance, not the element. So a let first = first in the ngFor will not work. I currently imported jQuery to handle ...
RooksStrife's user avatar
  • 1,747
3 votes
2 answers
7k views

Is it possible that you change the width of your layout in a selected component only? I wanted to change the <div class="page home-page"> only in my login component? Only in login component and ...
Joseph's user avatar
  • 7,875
1 vote
2 answers
2k views

I am adding a class to 2 div to toggle sidebar header using [ngClass] how do i remove those class when enlarge the screen. The problem is on widening the screen it remains there only because class is ...
Samson Maben's user avatar
  • 320
104 votes
9 answers
86k views

What is the difference in Angular 2 between the following snippets: <div [class.extra-sparkle]="isDelightful"> <div [ngClass]="{'extra-sparkle': isDelightful}">
Ben Taliadoros's user avatar
  • 9,731
3 votes
1 answer
1k views

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" ...
Monzingo's user avatar
  • 411
90 votes
9 answers
313k views

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 ...
Steve Kim's user avatar
  • 5,661
-2 votes
2 answers
4k views

I am trying to use [ngClass] in Angular and seems like it is not getting applied. Surprising [ngStyle] for similar css styles are working. Waht am I doing wrong here? There is no error in the console. ...
Gary's user avatar
  • 2,349
3 votes
1 answer
11k views

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's user avatar
  • 1,013
0 votes
1 answer
59 views

I have an image I'm trying to shake when a user guesses the name of a fish wrong. I'm using a conditional ng-class="{'shake':error}". However, even when the answer is correct the image shakes. I don't ...
Taylor N's user avatar
  • 520
0 votes
2 answers
951 views

I wan't to get a slideIn / slideOut animation by toggling the classes slideInRight and slideOutRight to a ul element. I've tried it in different ways but I it only works with one className. How ...
Codehan25's user avatar
  • 3,042
1 vote
3 answers
6k views

i an array like below this.defaultBackground=[{"applyBackground":"true"},{"applyBackground":"false"}]; in my html i have used ion-card <div *ngFor="let details of addressArray; let idx = index" ...
Mohan Gopi's user avatar
  • 7,746

1
2