Is there a way to use Angular router parameters in CSS?

I am trying to use the Angular Router to link parameters from a .ts file into my CSS file for the HTML template such as ‘background-image: {{ image }}’.

I am using the Angular Material card component and the *ngFor to display a profile for each person. I am trying to use the Angular Router to display a different header image (written as ‘background-image’) depending on the parameters set in the list(.ts) file.

However, the ‘background-image’ is set in the CSS file and I cannot find a way to use the parameters from the .ts file in CSS.

I want to put the image URL in the .ts file with the other parameters but then link it in the CSS file, like this:

background-image: url('{{ header }}')

Or by having a custom class for each person, like this:

class="{{ customclass }}"

This is the template for the card:

<div class="grid">
<div *ngFor="let busker of buskers; index as buskerId">
<mat-card class="card">
  <mat-card-header>

    <!-- IMPORTANT -->
    <div mat-card-avatar class="header-image"></div>

    <mat-card-title>{{ busker.name }}</mat-card-title>
  </mat-card-header>
</mat-card>
<div>

This is the CSS class for the profile picture (header-image):

.header-image {
  background-image: url('https://yt3.ggpht.com/a/AGF-l784OUQLYfEn7Hiwd- 
  CGG0vXtwwALwmrPolw9A=s900-mo-c-c0xffffffff-rj-k-no');
  background-size: cover;
}

I want the background-image URL to be different for each profile card in the grid.

Source: New feed
Source Url Is there a way to use Angular router parameters in CSS?