Angular set css dynamically of :before selector

Question

I need to label an upload button dynamically. My code so far:

<style>
   .file_upload_wrap.background_file:before {
    content: {{label}};  /* of course does not work */
  } 
</style>

<div class="file_upload_wrap background_file imgFormButton">
    <input type="file" class="file_upload" (change)="uploadFile($event, file)" name="file" id="file" [(ngModel)]="model.file"
      #file="ngModel">
</div>

How can I set the content dynamically?

Answer 1

You can use the attr css function to retrieve the value of an attribute

https://developer.mozilla.org/en-US/docs/Web/CSS/attr

component.css

.file_upload_wrap.background_file:before {
    content: attr(data-content);  
} 

component.html

<div class="file_upload_wrap background_file imgFormButton" [attr.data-content]="label">
    <input type="file" class="file_upload" (change)="uploadFile($event, file)" name="file" id="file" [(ngModel)]="model.file"
      #file="ngModel">
</div>

Edit: stackblitz showing example https://stackblitz.com/edit/angular-muysky?file=app%2Fapp.component.ts