Altering the background color of an individual mat-card component in an Angular application

Question

Altering the background color of an individual mat-card component in an Angular application

Here is the representation of my mat-card list in my Angular application:

<div [ngClass]="verticalResultsBarStyle">
  <div class="innerDiv">
    <mat-card [ngClass]="barStyle" *ngFor="let card of obs | async | paginate: { id: 'paginator', itemsPerPage: 10, currentPage: currentPage, totalItems: totalItems }" (click)="highlightCard()">
      <mat-card-header>
        <mat-card-title>{{card[0].title}}</mat-card-title>
        <mat-card-subtitle>{{card[0].subtitle}}</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <p>{{card[0].info1}}</p>
        <p>{{card[0].info2}}</p>
        <p>{{card[0].info3}}</p>
        <p>{{card[0].info4}}</p>
        <p>{{card[0].info5}}</p>
      </mat-card-content>
    </mat-card>
    <pagination-controls (pageChange)="OnPaginateChange($event)" id="paginator"></pagination-controls>
  </div>
</div>

this showcases the CSS styles applied:

.verticalResultsBarContainerEnabled {

  background-color: #eeeeee;
  width: 16%;
  float: right;
  overflow: visible;

}

.verticalResultsBarContainerDisabled {
  display: none;
}

.card {

  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;

}

.cardHighlight {

  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  background-color: #c12400;
  color: white;
}

.innerDiv {
  height: 755px;
  overflow: auto;
}

.paginator {
  margin: auto;
  width: 92%;
}

provided below is a snippet of TypeScript code relevant to the issue:

highlightCard() {
    if (this.barStyle === 'card') {
      this.barStyle = 'cardHighlight';
    } else {
      this.barStyle = 'card';
    }
  }

I am facing an issue where clicking on a single mat card changes the color of the entire list instead of just the selected card. How can I correct this behavior?

css angular typescript frontend

Answer 1

Answer №1

Your cards need to have individual indexes for proper styling. This is a common issue. I noticed that you are using the same bar style for all your cards. Each card should have its own unique bar style when they are retrieved from the backend. To accomplish this, make changes in your .ts file:

service.subscribe(cards => {
let i = 0
cards.forEach(card => {
this.barStyle[i] = // set your default barStyle here;
i++;
});

If each car has an id, it's better to avoid using i. In your template:

<mat-card [ngClass]="barStyle[i]" *ngFor="let card of obs; let i = index | async | paginate: { id: 'paginator', itemsPerPage: 10, currentPage: currentPage, totalItems: totalItems }" (click)="highlightCard(i)">

You're using an async function in your template. So, in your ts file, you should expect an Observable. To update the style of each card, subscribe to your service and update the objects. Make the following changes:

cards: Observable should be changed to cards: Card[];

loadingData = true;

Call the service like this:

getData() {
this.loadingData = true;
service().subscribe(cards => {
cards.forEach(card => {
this.barStyle[card.id] = // set your default barStyle here;
this.cards = cards;
this.loadingData = false; // set to false after data is loaded
});
}

highlightCard(id: number) {
if (this.barStyle[id] === 'card') {
this.barStyle[id] = 'cardHighlight';
} else {
this.barStyle[id] = 'card';
}
}

In your template:

<mat-card ***ngIf="!loadingData"**
[ngClass]="barStyle[card.id]" 
*ngFor="let card of obs | async | 
paginate: { id: 'paginator',
itemsPerPage: 10,
currentPage: currentPage,
totalItems: totalItems }"
(click)="highlightCard(card.id)">

Sometimes, your template may render before the data is fully loaded, so use a boolean to wait for it.

**To maintain clean code, initialize variables for pagination in your .ts file*

Answer 2

Your cards need to have individual indexes for proper styling. This is a common issue. I noticed that you are using the same bar style for all your cards. Each card should have its own unique bar style when they are retrieved from the backend. To accomplish this, make changes in your .ts file:

service.subscribe(cards => {
let i = 0
cards.forEach(card => {
this.barStyle[i] = // set your default barStyle here;
i++;
});

If each car has an id, it's better to avoid using i. In your template:

<mat-card [ngClass]="barStyle[i]" *ngFor="let card of obs; let i = index | async | paginate: { id: 'paginator', itemsPerPage: 10, currentPage: currentPage, totalItems: totalItems }" (click)="highlightCard(i)">

You're using an async function in your template. So, in your ts file, you should expect an Observable. To update the style of each card, subscribe to your service and update the objects. Make the following changes:

cards: Observable should be changed to cards: Card[];

loadingData = true;

Call the service like this:

getData() {
this.loadingData = true;
service().subscribe(cards => {
cards.forEach(card => {
this.barStyle[card.id] = // set your default barStyle here;
this.cards = cards;
this.loadingData = false; // set to false after data is loaded
});
}

highlightCard(id: number) {
if (this.barStyle[id] === 'card') {
this.barStyle[id] = 'cardHighlight';
} else {
this.barStyle[id] = 'card';
}
}

In your template:

<mat-card ***ngIf="!loadingData"**
[ngClass]="barStyle[card.id]" 
*ngFor="let card of obs | async | 
paginate: { id: 'paginator',
itemsPerPage: 10,
currentPage: currentPage,
totalItems: totalItems }"
(click)="highlightCard(card.id)">

Sometimes, your template may render before the data is fully loaded, so use a boolean to wait for it.

**To maintain clean code, initialize variables for pagination in your .ts file*

Altering the background color of an individual mat-card component in an Angular application

Answer №1

Similar questions

Encountering issues with MatToolbar in Angular 9 causes unexpected errors

The styling of divIcons in React Leaflet Material UI is not applied as expected

Can you provide me with a comprehensive list of all the colors available in Twitter Bootstrap 3?

Angular - Enhancing the page with valuable information

Implement a click event listener in React.js

Activate a Dropdown Menu by Clicking in a React Application

Establish a vertical column that matches the height of its parent element

Contrasting Firefox Experience on Mac and Windows

Application fails to launch after disabling unsafe-eval in the restricted Content Security Policy settings

Tips for adjusting this CSS to be compatible with Internet Explorer

Selecting the optimal data structure: weighing the benefits of using boolean check versus array .include (balancing performance and redundancy

Creating object interfaces in TypeScript dynamically based on function parameters

Issue with react-router-dom loader defer type issue

The classification of a property is determined by the types of the other properties present

What could be the reason for Typescript attempting to interpret files in the `./build` directory as input files?

When the flex-grow property is set to 1, the height of the div extends beyond the space that

Presenting XML data in HTML using a customized CSS stylesheet

Issue with navigating history back in Angular 7 using an iframe

Components within Angular components

JavaScript code using the Jquery library to retrieve the following article from 'cached memory'