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

Tips for troubleshooting a TypeScript create-react-app in Visual Studio Code

Instructions to replicate the issue: Place a breakpoint in any .tsx file execute my npm script "start": "react-scripts start", commence debugging with F5 or by choosing a configuration from the Run and Debug window in vscode. ...

typescriptvisual-studio-codewebpackcreate-react-app

The issue with ngx-bootstrap-modal is that it fails to interpret HTML elements

In my Angular 5 project, I am implementing ngx-bootstrap-modal. Below is the code I am using to open the modal: this.dialogService.addDialog(PopUpComponent, { title: 'Custom locale', message: "Hello ? " }).subscribe((isConfirmed ...

angularangular5ngx-bootstrap-modal

Protecting a client's encryption key

I was given the task of enhancing the security of a website that utilizes Angular v15 + JWT. The first step was to alter the login POST-request (HTTPS) from this format: /api/login?username=user_name&password=pass123 to this format: /api/login?credent ...

angularcryptojswebsecurity

`The validation in Angular 12 is successful, yet the mat-input remains invalid.`

Code snippet of Component- ngOnInit(): void { this.form = this.fb.group({ currentPassword: ['', [Validators.required], [this.matchCurrentPassword]], newPassword: ['', [Validators.required, Validators.minL ...

angularvalidationangular-reactive-formsmat-inputmat-error

How to use Angular2 Router to redirect a state to its default substate

How can we implement a default substate in the new Angular2 Router? For instance, I would like the router to automatically direct from /user to /user/profile, creating a default substate for user. ...

angularangular2-router

Guide to specifying the indexer type of a function argument as T[K] being of type X in order for t[k]=x to be a permissible expression

Currently, I am attempting to create a function that can alter a boolean property within an object based on the provided object and property name. While I have found some helpful information here, the function body is still producing errors. Is there a way ...

typescript

The callback function inside the .then block of a Promise.all never gets

I'm currently attempting to utilize Promise.all and map in place of the forEach loop to make the task asynchronous. All promises within the Promise.all array are executed and resolved. Here is the code snippet: loadDistances() { //return new Prom ...

javascripttypescriptpromise

Utilizing the variables defined in the create function within the update function of Phaser 3

I'm facing an issue in my game where I can't access a variable that I declared in the create function when trying to use it in the update function. Here is a snippet of what I'm trying to achieve: create() { const map = this.make. ...

javascripttypescriptphaser-framework

What are the benefits of utilizing TypeScript declarations? How can you demonstrate their value with concrete examples?

I'm a bit confused about the use of declaration in TypeScript. It seems like the compiler doesn't compile it into the js file, so what is the purpose and advantage of using declaration? Can someone please explain this to me? ...

typescript

The custom classes do not work with the ngx-bootstrap modal feature

I'm in the process of setting a new width for a modal that has been created using BsModalService. I have found that I can't change it by assigning a custom class, but only by utilizing the given classes like 'modal-xl'. Can you explain ...

angularngx-bootstrap-modal

Eliminate the "email address" input field from Stripe checkout in Angular 2

I am currently using Angular 2 for my project and need some help. Is there a way to remove the email address field from Stripe checkout? https://i.stack.imgur.com/auf6C.png Thank you in advance! ...

angularstripe-payments

What could be causing the TypeScript exhaustive switch check to malfunction?

How come the default case in the switch statement below does not result in an exhaustive check where 'item' is correctly identified as of type 'never'? enum Type { First, Second } interface ObjectWithType { type: Type; } c ...

typescript

Using TypeScript with knockout for custom binding efforts

I am in the process of developing a TypeScript class that will handle all bindings using Knockout's mechanisms. Although I have made progress with the initial steps, I have encountered a roadblock. While I can successfully bind data to my HTML element ...

typescriptknockout.jsdata-binding

Startling error: Our node server.js running into an unexpected token

I'm attempting to follow the Angular Universal quickstart, but I encountered an error when running "node server.js". Emily's-MBP:vepo Emily$ node server.js /Users/Emily/Development/vepo/server.js:3 import 'angular2-universal/polyfills&apos ...

node.jsangularangular-universal

Submitting a form using an anchor tag in Angular 8: A step-by-step guide

I have a question about how to submit form data using hidden input fields when a user clicks on an <a> tag. <form action="/submit/form/link"> <input type="hidden" [attr.value]="orderNumber.id" /> <input type="hidden" [attr.value]= ...

javascriptangulartypescriptformssubmit

What is the best way to incorporate node modules into my tsconfig file?

I've taken some raw angular typescript components and packaged them into a private NPM module for sharing between various projects. Although I import these components like any other npm library, I encounter an error message when trying to serve my ap ...

angulartypescriptbit-src

Despite the unconsumedBufferLength being 0, DataReader.loadAsync is still being completed

Working on UWP WinRT, I'm dealing with JSON stream consumption using the following code: async function connect() { let stream: MSStream; return new CancellableContext<void>( async (context) => { stream ...

javascripttypescriptwindows-runtime

Customizing Tabs in Material UI v5 - Give your Tabs a unique look

I am attempting to customize the MuiTabs style by targeting the flexContainer element (.MuiTabs-flexContainer). Could someone please clarify the significance of these ".css-heg063" prefixes in front of the selector? I never noticed them before upgrading my ...

javascriptreactjstypescriptmaterial-ui

Angular - Acquire reference to the <audio> element

Is there a way to access the methods of an audio tag within my component in order to implement play and pause functions based on click events? The current method I tried does not allow me to access the play() function. How can I correctly approach this? ...

htmlangulartypescript

Type inference and the extends clause in TypeScript 4.6 for conditional types

My focus was on TypeScript 4.7 when I created the following types: const routes = { foo: '/foo/:paramFoo', bar: '/bar/:paramFoo/:paramBar', baz: '/baz/baz2/:paramFoo/:paramBar', } as const; type Routes = typeof routes; ...

typescript