Using the ngClass directive with a conditional statement: Select 'class1' if true, otherwise select 'class2'

i am currently experimenting with this piece of code

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<button [ngClass]="{'btn': showDirectiveContent === false ? 'btn btn-danger': 'btn btn-success'}">
    <b *ngIf="!showDirectiveContent; else noServer">Display Details</b>
      <ng-template #noServer>
        <b>Hide Details!</b>
      </ng-template>
</button>

the *ngIf directive is functioning very effectively, I also attempted to use [ngStyle] [ngStyle]="{backgroundColor: i > 4 ? 'green':'' Directive is working as expected, unfortunately I encountered difficulties with the ngClass Directive, after researching it appears to be a common issue with no clear solutions.

angulartypescript

Answer №1

Update your code with the following changes:

<!-- Both cases have the common class "btn" -->
<button class="btn" [ngClass]="{'btn-danger': !showDirectiveContent, 'btn-success': showDirectiveContent}">
<!-- Insert content here -->
</button>

Explanation:

As per the documentation at https://angular.io/api/common/NgClass, the ngClass attribute requires a specific format when an object is used as the value:

Object - keys represent CSS classes that will be added if the expression in the value evaluates to true, and removed if false.

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

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

Exploring the functionality of the Angular snackbar feature

I have created a simple snackbar with the following code: app.component.ts: ngOnInit(){ this.dataService.valueChanges.pipe( filter((data) => data === true), switchMap(() => { const snackBarRef = this.matSnackBar.open ...

angulartypescriptunit-testingjasminekarma-jasmine

Having Trouble Displaying Material UI Icons in Your React App? Here's Why: "Invalid Objects as React Children"

I have been working on a basic app that showcases information about a patient. In this specific component, I am only displaying the name, occupation, and a symbol from Material UI to indicate whether the patient is male or female. However, when I attempt ...

reactjstypescriptmaterial-ui

typescript push in react native is a crucial step to enhance performance and optimize

I've been diving into TypeScript within the realm of React Native. Oddly, when I translated a certain snippet to vanilla JavaScript, the application worked flawlessly. However, upon converting it back to TypeScript, an error message popped up stating ...

javascripttypescriptreact-nativetypes

Implementing Angular 2 module as a nested route

After creating an ngModule called EducationModule that loads a set of navigation items and child routes into a router outlet defined in the root component EducationComponent, everything is functioning perfectly. However, I am facing one issue: I want the f ...

angular

Here's a unique version: "Utilizing the onChange event of a MaterialUI Select type TextField to invoke a function."

I am currently working on creating a Select type JTextField using the MaterialUI package. I want to make sure that when the onChange event is triggered, it calls a specific function. To achieve this, I have developed a component called Select, which is es ...

reactjstypescriptmaterial-ui

Angular 13: SyntaxError Encountered: Token 'export' Not Recognized

After upgrading Angular from version 12 to 13, I encountered an error when running the app: "Uncaught SyntaxError: Unexpected token 'export'." Here are some additional details for context: In the angular.json configuration file, I had specified ...

angulartypescriptexportsyntax-errorangular13

removing the mapStateToProps function will result in an undefined value

I am new to React and I'm in the process of converting a class component to functional components using hooks. I need some guidance on safely removing 'mapStateToProps' without encountering undefined errors. I have two pages, A.js and B.js. ...

javascriptreactjstypescriptfunctionreact-hooks

Incorporate Typescript into specific sections of the application

I've got a Node.js application that's entirely written in JavaScript. However, there are certain sections of my app where I'd like to utilize TypeScript interfaces or enums. Is there a way for me to incorporate Typescript into only those s ...

node.jstypescript

Killing the command prompt in Typescript: A step-by-step guide

Is there a way to completely close the cmd where the typescript file is running but unable to do so? How can this be achieved? console.log('This ts file must be terminate itself'); let asdef = process.pid; let asdeff = process.ppid; const {exe ...

typescriptcmdcommand-prompt

Angular service tested using the put method in a test scenario

Currently, I am delving into test cases using Jasmin and karma to enhance my skills. One interesting project involves creating an Angular service that updates records in a database. While I have experience creating test cases, I must admit that testing met ...

angularkarma-jasmineangular-services

Outside the observable in Angular, there is a vacant array

Within my Angular application, I am facing an issue with the following code snippet located inside a method: let cardArray: string[] = []; this.cardService.getCards().subscribe((cards) => { console.log("1", cards); for (const card of car ...

angulartypescriptrxjsobservable

Issues with expanding all nodes in the Angular Treeview function by Nick Perkins in London are causing difficulties

Currently utilizing the angular treeview project found here: https://github.com/nickperkinslondon/angular-bootstrap-nav-tree After examining the functionality, it seems that this treeview is lacking search capabilities. To address this limitation, I deci ...

javascriptangulartreeview

Struggling to retrieve variable within the .catch function in Ionic 3

I am having trouble accessing the toast variable from the constructor in order to toast errors. It keeps showing as undefined, and I'm not sure why. This issue seems to only occur in this class, which is strange. The error message reads "ERROR TypeErr ...

angulartypescriptionic3

The hook from Supabase is facing issues with proper importing

This project is a Spotify clone. The issue I'm facing is related to importing the hook. The error message reads: React Hook "useSupabaseClient" is called in function "useloadArtistImage" that is neither a React function component nor a custom React H ...

reactjstypescriptnext.jssupabase

Hide the navigation menu when a page link is selected

Within my Angular 8 application, a fixed navigation bar is positioned at the top of the screen. Upon hovering over a dropdown nav link, a menu will appear for the user to explore. However, when a user clicks on one of these menu links, Angular Routing is ...

cssangularsassnavigation

failure of pipe during search for art gallery information

Hi, I've created a filter pipe to search for imagenames and imageids among all my images. However, it seems to only find matches in the first image. There seems to be something wrong with my code. This is my FilterPipe class in filter.pipe.ts where I ...

javascriptangulartypescriptpipe

Implement the addition of subcollections to a unified identification document in Firestore

I am struggling to store the URLs of multiple images (previously saved in Storage) in a subcollection of a Firestore document. Although I have managed to do it, each image generates a new document with its corresponding sub collection img, which is not my ...

angularfirebasegoogle-cloud-firestoreangularfire2

What is the correct way to format React's dispatch function in order to utilize a "then" method similar to a Promise?

I'm working on a simple app that dispatches an action upon first load to populate the store. However, I'm facing an issue with trying to run a then method on dispatch, as typescript is throwing errors. (As per redux's documentation, the ret ...

reactjstypescriptreact-reduxredux-toolkitredux-promise-middleware

Setting up Bootstrap 4 in VS 2017 and Angular 4

I am embarking on my initial side project and attempting to utilize the following tools: .Net Core 2 MVC Angular 4 Bootstrap 4 Visual Studio 2017 I successfully followed this tutorial to get the Angular app up and running: Although I have experience wi ...

angularvisual-studio-2017.net-corebootstrap-4

Conceal the Angular Material toolbar (top navigation bar) automatically when scrolling downwards

In my Angular application, the main navigation consists of a standard toolbar positioned at the top of the page. My goal is to have this navigation bar smoothly scroll up with the user as they scroll down, and then reappear when they scroll back up. I at ...

cssangulartypescriptuser-experience