Questions tagged ng-class

Explore the latest questions and answers asked by our top developers.

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 I need to set false previous clicked component. How can I access and set false […]

By Ricardo Casta eda
Published
Categorized as angular, boolean, click, ng-class, ngfor Tagged , , , ,

getting ‘Type ‘void’ is not assignable to type ‘string’ when using function in NgClass

I’m trying to add a conditional CSS class to a Material element in Angular using NgClass. I want a CSS class added based on the current route. Here is the html: <mat-expansion-panel-header [ngClass]="activeSection(‘accountsettings’)"> <mat-panel-title> Account Settings </mat-panel-title> </mat-expansion-panel-header> Here is the typescript: selectedClass: string; public activeSection(name: string) { this.router.events.subscribe((event: any) => { if(event instanceof NavigationEnd){ […]

By mdailey77
Published
Categorized as angular, javascript, ng-class Tagged , ,

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 "*ngIf="accountService.currentUser$ | async" everytime i need to differentiate the code based on logged in status. Is fine to use "*ngIf="accountService.currentUser$ | async" […]

By Glacierdk
Published
Categorized as angular, ng-class, observable Tagged , ,

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 }, { itemId: "555", category: ‘B’, total: 50 , price:10 } …. … { itemId: "555", category: ‘B’, total: 2, price: 2 […]

By lona bin
Published
Categorized as angular, ng-class, typescript Tagged , ,

How to find min , max on array and how to change color text for min green color and max red color using angular

I have the JSON like below but I have a lot of data: items: [ { itemId: "22222", category: ‘A’, total: 100 }, { itemId: "666666", category: ‘A’, total: 80 }, { itemId: "555", category: ‘B’, total: 50 } …. … { itemId: "555", category: ‘B’, total: 2 } ] I create on .scss &.is-green […]

By lona bin
Published
Categorized as angular, max, min, ng-class, typescript Tagged , , , ,

How to change color text when using ngClass inside *ngFor

I want to change color of text when using ngClass. I have the JSON like below but I have a lot of data: items: [ { itemId: "22222", category: ‘A’, total: 100 }, { itemId: "666666", category: ‘A’, total: 80 }, { itemId: "555", category: ‘B’, total: 50 } ] I create on .scss &.is-green […]

By lona bin
Published
Categorized as angular, ng-class, sass, typescript Tagged , , ,

ngClass not reacting to function updating variable

I am applying a light and dark theme using ngClass but it is not reacting to the function updating the boolean value. When the typescript function is triggered, it prints out the correct updated value of dark_active but the class is not applied. When I update the slide toggle the classes are updating correctly. Why […]

By Gary Kelly
Published
Categorized as angular, css, html, ng-class, typescript Tagged , , , ,

ngClass doesn’t change my bootstrap style

I’m following along on a udemy course and I don’t get the same results as the example video. I’m having trouble with ngClass. My html file: <input type="text" [(ngModel)]="newItem"> <button (click)="onAddItem()" class="btn" [ngClass]="{‘btn-primary’: newItem !== ”, ‘btn-secondary’: newItem===”}" >add Item </button> <hr> <ul class="list-group"> <li class="list-group-item" *ngFor="let item of items">{{item}}</li> </ul> When angular renders the […]

I’m getting error, while implementing method in ngClass

I don’t know where I’m getting wrong. app.component.html <div [ngClass]="stylemethodName();"> ngClass with method </div> app.component.ts export class AppComponent { title = ‘Simple_CRM_App’; stylemethodName(){ return ‘c3′; } } app.component.scss .c3 { color:red; } I’m getting an error in the template app component. Source: AngularJS Questions

add class to a word in a string dynamically Angular

I want to add a class to a word in a string if it matches certain criteria Your Bulk Creation: 8312e9, has Completed With Error. Please navigate to Outgoing Invoices> Create> Bulk History to view results. I have this string, now if the string contains status as CompletedWithError then in the upper text I have […]

By Juhi Shaw
Published
Categorized as angular, javascript, ng-class Tagged , ,
1 2 3 7

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq