Exploring the power of utilizing multiple classes with conditions in Angular 2+

Can you help me figure out how to use a condition for selecting multiple classes with [ngClass] in Angular?

<td>
<span 
      [ngClass]="{
             'badge badge-success': server.type === 'PRODUCTION',
             'badge badge-danger': server.type === 'TEST',
             'badge badge-warning': server.type === 'DEV'
              }">
</span>
</td>

I am aware that [ngClass] does not work with {{ }}, and I am fetching my data from a Django REST API. What is an alternative way to achieve this? Thank you.

angulartypescriptdjango-rest-frameworkangular6

Answer №1

You don't need to include {{}} when using [ngClass], so simply omit it.

Give this a shot -

 [ngClass]="{
             'badge badge-success': server.type  === 'PRODUCTION',
             'badge badge-danger':  server.type  === 'TEST',
             'badge badge-warning': server.type  === 'DEV'
              }">

Answer №2

When dealing with multiple conditions, you can utilize the [ { key: class}[ expression ]] method

<span class="badge " ng-class="[{'PRODUCTION':'badge-success', 'TEST':'badge-danger', 'DEV':'badge-warning'}[ server.type]]"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting up event listeners from a string array (using PIXI.js)

Hey there! I've encountered a bit of an interesting challenge that could easily be resolved by duplicating the code, but where's the fun in that? This project is more of an experiment for me, just to prove that I can do it. However, the idea has ...

javascripttypescriptcallbackpixi.js

Adding a Third-Party JavaScript Plugin to Angular 7

I've been attempting to integrate the read-excel-file JavaScript plugin into my Angular 7 project. Despite following all the methods recommended on various websites, I have yet to succeed. Could anyone provide a better solution? declare var readXlsx ...

angulartypescriptpluginsecmascript-6

Is there a way to delegate properties in Angular 2+ similar to React?

When working with React, I have found it convenient to pass props down dynamically using the spread operator: function SomeComponent(props) { const {takeOutProp, ...restOfProps} = props; return <div {...restOfProps}/>; } Now, I am curious how I ...

javascriptangularreactjstypescript

The Typescript decorator is unable to access the property type within its own scope

I am currently in the process of developing a dependency injector for use in my VUE js project. Recently, I created an Inject decorator with the intention of accessing a property type. It was functioning perfectly fine yesterday, but now it seems that som ...

typescriptvue.jstypescript-decoratorreflect-metadata

How might the issue of update activation affecting lazy loading in an Angular PWA app specifically manifest itself?

I am looking for a way to trigger an update activation in my Angular PWA app. I came across a note in the documentation from the official Angular website (https://angular.io/guide/service-worker-communications) that says: "Doing this could break lazy-load ...

angulartypescriptlazy-loadingservice-workerprogressive-web-apps

The arrow function in Jest is missing a name property

Currently, my setup includes: node.js: 9.8.0 Jest: 23.4.2 ts-jest: 23.1.3 typescript: 2.9.2 While attempting the following in my *.test.ts files: const foo = () => 'bar'; console.log(foo.name); // '' foo contains the name pro ...

javascriptnode.jstypescriptjestjs

Troubleshooting compilation problems in Angular2 with nested components

I have created two components in Angular2 using TypeScript: app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', styles : [` .parent { background : #c7c7c7; ...

angulartypescripttsc

Discovering updates to a read-only input's [ngModel] binding in an Angular 2 directive

One issue I'm facing is with a directive that sets the height of a textarea dynamically based on its content: @Directive({ selector: '[fluidHeight]', host: { '(ngModelChange)': 'setHeight()' } }) export class ...

angulartypescriptangular2-directives

Is it possible for Angular 2 JWT to have an unauthenticatedRedirector feature?

Having transitioned from Angular 1 where JWT tokens were used for user authentication, I had the following code: .config(function Config($httpProvider, jwtOptionsProvider) { // Interceptor to add token to every $http request jwtOptionsProv ...

angularauthenticationjwtangular2-jwt

Launching a Node.js application on a Kubernetes cluster

Currently, I have a local Angular 6 application that I run using "npm start." My next goal is to deploy this application in Kubernetes. However, I'm unsure about how to dockerize an Angular 6 based application and run it in Kubernetes. Any assistance ...

angularnpmkubernetes

Inspecting a union type with a TypeScript property validation

I have defined a union of two types in my code. Here are the definitions: type Generic = { subtype: undefined, user: string, text: string } type Other = { subtype:'message', text: string } type Message = Generic | Other; Within my co ...

typescript

How come TypeScript does not detect when a constant is used prior to being assigned?

There's an interesting scenario I came across where TypeScript (3.5.1) seems to approve of the code, but it throws an error as soon as it is executed. It appears that the root cause lies in the fact that value is being declared without being initiali ...

typescript

Enrich your TypeScript code by unleashing the power of enum typing in overloading logical

I have a custom enum called PathDirection that represents different directions export enum PathDirection { LEFT="LEFT"; RIGHT="RIGHT"; }; Within my code, I need to toggle between the two directions. For example: let currentDire ...

typescriptenumsoverloadinglogical-operators

Retrieve the service variable in the routing file

How do I access the service variable in my routing file? I created a UserService with a variable named user and I need to use that variable in my routing file. Here is the approach I tried, but it didn't work: In the routing file, I attempted: cons ...

javascriptangulartypescriptangular2-routing

Mongodb Dynamic Variable Matching

I am facing an issue with passing a dynamic BSON variable to match in MongoDB. Here is my attempted solutions: var query = "\"info.name\": \"ABC\""; and var query = { info: { name: "ABC" } } However, neither of thes ...

node.jsmongodbtypescript

Sub-objects in Angular 2 with observables

I need guidance on understanding Observables/Subjects in Angular2. My app includes data of the following structure: sections = [ { _id: '999' name: 'section 1' items: [ { name: "i ...

angularrxjs

Angular 7: struggling to locate the type declaration file

Everything seemed to be working fine with my project yesterday, but today I ran into an issue right after installing the ngx-pagination module: ERROR in src/app/views/dashboard/step1/step1.component.ts(1,23): error TS2688: Cannot find type definition ...

angulartypescriptnpmangular7

While working on a project in React, I successfully implemented an async function to fetch data from an API. However, upon returning the data, I encountered an issue where it was displaying as a

I am working with React and TypeScript and have the following code snippet: const fetchData = async () => { const res: any = await fetch("https://api.spotify.com/v1/search?q=thoughtsofadyingatheist&type=track&limit=30", { met ...

javascriptreactjstypescriptasync-awaitfetch

Combine data from a new observable with the existing data in Angular using RxJS

I have a list stored as an observable[]. To subscribe to it in the template, I am using async. Each time I scroll, this method is called: onScroll() { this.list$ = this.list$?.pipe( tap((list) => { this.notificationService . ...

angularrxjsobservable

The correct way to implement the bootstrap carousel with Angular

Among the multitude of inquiries on stackoveflow, I delved into a few: How to implement bootstrap carousel with Angular ng-repeat? How to utilize carousel with Angular : No answers after 9 months. Issues with Slides in Bootstrap Carousel... : No satisfac ...

angularuser-interfacebootstrap-4