Apply a class using [ngClass] based on an HTML condition within the local scope

In the past, I have utilized [ngClass] to assign classes based on the Boolean value of a variable in the JavaScript/TypeScript. However, I am now curious if it is achievable to apply [ngClass] based on a local HTML boolean value instead?

For example:

<div class="card" *ngFor="let item of data" #panel ngClass="{expanded: isExpanded}">
  <div class="header">
    <div class="itemName">Text</div>
    <div class="itemDir">Some more text</div>
    <mat-icon *ngIf="!panel.isExpanded" (click)="panel.isExpanded=true">edit</mat-icon>
    <mat-icon *ngIf="panel.isExpanded" (click)="panel.isExpanded=false">cancel</mat-icon>
  </div>
</div>

In this scenario, I am showcasing one of the two icons based on the local isExpanded variable specified within the HTML rather than the backend.

Is it feasible to apply a class according to this value?

You can view my current project here

htmlcssangularanimation

Answer №1

utilize [class.expanded]="isExpanded". linking to class.expanded takes priority over the class attribute 

<div class="card" *ngFor="let item of data" #panel [class.expanded]="panel.isExpanded" [class.notExpanded]="!panel.isExpanded">

Answer №2

One way to create a variable on the template is by using 

*ngIf="true as isExpanded"

<div class="card" *ngFor="let item of [1,2,3,4];"  >
  <div class="header" *ngIf="true as isExpanded" ngClass="{expanded: !isExpanded}">
    <div class="itemName">Text</div>
    <div class="itemDir">Some more text</div>
    <div *ngIf="isExpanded" (click)="isExpanded=!isExpanded">edit</div>
    <div *ngIf="!isExpanded" (click)="isExpanded=!isExpanded">cancel</div>
  </div>
</div>

Check out the stackblitz demo

Answer №3

<div class="display-card" *ngFor="let information of dataList" #panel ngClass="{expand: isExpanded}">
<div class="heading">
    <div class="titleName">{{information.title}}</div>
    <div class="itemLocation">{{information.location}}</div>
    <mat-icon *ngIf="!isExpanded;else other_info" (click)="isExpanded=true">edit</mat-icon>
    <ng-template #other_info>Another Icon content</ng-template>
</div>

The above code showcases a use of If and else statements with a template referenced variable to toggle between different icons.

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

Using Jquery Simplyscroll to incorporate images on both the left and right side within a container or clip

I am currently utilizing Jquery Simplyscroll (http://logicbox.net/jquery/simplyscroll/) and I am seeking a way to incorporate a faded png image on both the left and right sides to prevent my images from appearing "cut off" while sliding through. Below is ...

jquerycss

Display or Conceal Multiple Divisions Using Angular 2

I am looking to implement a functionality using Li lists to toggle the visibility of multiple divs in Angular 2. Initially, all divs on the page will be visible. When viewing on a smaller screen, I want to hide some divs and show a specific div when a cor ...

htmlangulartypescript

Learn how to utilize the combineLatest/zip operators to only respond to emissions from the second observable while disregarding emissions from the first observable

Here's an example of how I'm initializing a property: this.currentMapObject$ = zip(this.mapObjects$, this.currentMapObjectsIndex$, (mapObjects, index) => mapObjects[index]); I want the value of this.currentMapObject$ to be emitted only ...

javascriptangulartypescriptrxjsngrx

Tips for capturing changes in a "count" variable and executing actions based on its value

I have a counter on my webpage and I'm trying to change the style of an element based on the count variable. I tried using the .change action but I haven't been able to get it working. It might not be the right solution. Can anyone provide some ...

javascripthtmljquerycounter

Delivering methods and resources using Webpack 5 module federation

In my Angular 11 app, I have successfully integrated the webpack 5 module federation system. This enables the app to load modules remotely on-demand from another build. One aspect that has not been clearly documented is how to handle assets such as styles ...

angularwebpackassetswebpack-module-federation

What are the best methods for creating a responsive div container?

Hello, I am having trouble with the responsiveness of my div. I want these two images to stack on top of each other when the window is resized. I have attached a screenshot to demonstrate exactly what I am trying to achieve. I can't seem to figure out ...

htmlcss

Modify anchor link color in a one-page website by using Jquery to detect scroll position changes when reaching different page sections

Each if statement contains specific numbers to change the text color of the visited/current/active anchor link. The height of the page is dependent on its width. How can this be resolved? Apologies if my explanation is confusing, English isn't my stro ...

jqueryhtmlcss

extracting data from a div while presenting a confirmation pop-up

I am attempting to extract information from a file on the following website. Specifically, I am trying to download an Excel sheet containing a complete directory of towns in TRIPURA, listed as the first item in grid format. Here is the code snippet I am ...

pythonhtmlselenium-webdriverweb-scrapinghref

Employing conditional statements in conjunction with styled components

Is there a way to style my PaymentBtn with the main styled Button but only apply the hover effect when the isLoading prop is activated, without changing anything else? I want the styling to remain the same except for the hover effect. Basic button export ...

cssreactjsstyled-components

The mobile devices do not display minuscule text when rendering the React responsive UI

Recently, I decided to experiment with the responsive drawer feature of React Material UI. To try it out, you can access the online demo through the Code Sandbox link provided in the official documentation. To begin my testing, I copied and pasted the cod ...

cssreactjsmaterial-uimedia-queries

Verify if the button is assigned a specific class, then generate a 'completed' div

I'm new to working with Jquery and I have a question. In my upload form, when something is uploaded the upload-button changes class from: <a class="upload-button upload buy" id="upload-button"><span>Upload a document</span></a> ...

javascriptjqueryvalidationhtml

The video is not appearing on mobile devices using Safari, Firefox, and Chrome, but it is displaying properly on desktop computers

My website has a video in the header that works fine on desktop but not on mobile. I am using next.js 13.4 and here is my code: <video id="background-video" autoPlay playsInline loop muted classN ...

javascripthtmlreactjsnext.jsfrontend

Concealing subcategories within a responsive menu using jQuery

My website's responsive menu changes based on screen resolution, but I encountered an issue. On mobile viewports, the sub items in the menu are displayed by default. I want them to only appear when the parent item is clicked. Currently, clicking the p ...

jqueryhtmlcssresponsive-designsubmenu

Organize your items vertically using jQuery Mobile's list feature

I am currently working on a mini chat application. The messages in the list are appearing side by side and I would like them to be displayed one below the other. Is there a way to adjust the CSS or add classes to achieve this? <div style="height:100% ...

jquerycssjquery-mobile

Conceal mat-table column when form field is empty

As a newcomer to the world of programming, I am currently tackling a table that includes form fields for filtering purposes. My goal is to dynamically hide or show table columns based on whether a form field has a value or not. In my table.component.ts ...

angulartypescriptangular-materialangular-formsmat-table

What is the best way to stop a select menu option from being highlighted once it has been clicked on?

Is there a way to prevent the highlighting of selected options in a <select> menu when a user makes a selection? <select id="my_select_menu"> <option id="1">Option 1</option> // I do not want this option to be highlighted ...

htmlcss

What are the limitations of using concatMap for handling multiple requests simultaneously?

In my current function, I am receiving an array of objects called data/ids as a parameter. Within this function, I need to execute a post request for each element/id: fillProfile(users) { const requests = []; console.log( 'USERS.length:&apos ...

angulartypescriptxmlhttprequestrxjs6

Attempting to showcase a pair of unordered lists side by side using the power of flexbox

I am having trouble getting this to display on a single line, no matter what I try. While there may be simpler ways to achieve this without using flexbox, I am eager to learn how to do it using flexbox properties. My desired outcome is to have the first u ...

htmlcssflexbox

Overlapping Image Arrows with CSS Styling

After receiving a design with what appeared to be a simple feature from a designer, I discovered that implementing it was more complex than expected. Specifically, I needed to create a CSS3 arrow with an image as the fill color in order to overlap the unde ...

jqueryhtmlcssslider

"Utilizing jQuery and Bootstrap 4 in TypeScript, attempting to close modal window using jQuery is not functioning

Trying to make use of jquery to close a bootstrap modal within an angular project using typescript code. The following is the code: function call in html: (click)="populaterfpfromsaved(i, createSaved, createProp)" createSaved and createProp are local ...

javascriptjqueryangulartypescriptbootstrap-modal