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

Tips for arranging five images side-by-side in a row

Troubleshooting NGINX and NodeJS (Docker) issue on Synology Server

The hamburger menu for mobile devices is not functioning properly on the website's mobile version, however it operates correctly when the screen is resized

Lazy loaded modules do not have access to singleton services

Maintain dropdown menu visibility while navigating

What steps do I need to take to activate the legacy policy API for Google login?

Leveraging the power of PHP includes with nested subdirectories

Incorporating CSS and JS files into a WordPress theme

What is the best way to pass a conditional true or false value to React boolean props using TypeScript?

What is the best way to transform an array of objects into a nested array through shuffling

Ensuring the CSS animation reaches its ultimate state by the end

Angular Pipe -- Implicit type 'any' error occurs when trying to index type 'string' with an expression

Do I really need all the dependencies suggested in the angular2 quickstart guide?

Spinning an object using JQuery

Tips for automatically disabling cloudzoom based on image width

"Import data from a text file and store it as an array of objects using Types

Excessive white space within a relative block div causing the content to appear smaller in comparison

Ways to recycle the table feature in angular2?

JavaScript - Delayed Text Appearance with Smooth Start

Show a few values as a string in Angular using Typescript