I have been working on applying different styles to cards created using ngFor in Angular. Here's how it currently looks: https://i.sstatic.net/UhbSp.png
My aim is to set unique styles for each card. Due to the ngFor loop used in creating them, I initially could only change the style for all cards collectively.
However, I was able to assign a class to each card element as shown below:
<div *ngFor="let module of modules" class="{{module.name}}">
Subsequently, I applied CSS styling like this:
div.Rekrutacja {
background-color: rgb(1, 1, 1);
}
This approach partly worked as it targeted the first element but did not allow further modifications. When I attempted to set the background color to black, here is what happened:
https://i.sstatic.net/FDvs0.png
The style seemed to be applied to an unclear area, preventing me from specifically targeting the mat-card element for customization.
Below is the HTML structure being used:
Here is the relevant CSS code:
And finally, the TypeScript code defining the modules: