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?
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
Instead of using css, and the :before selector, you could add an extra DOM-element before the div you want to decorate.
<label>{{label}}</label>
<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>
Use a @HostBinding to defined CSS vars which you can then use in your .scss file, making it very easy to style :before and :after dynamically.
.ts:
size = 10
padding = 2
@HostBinding('attr.style')
public get cssVars() {
return `
--switch-size: ${this.size};
--switch-padding: ${this.padding};
--switch-size-inner: ${this.size - this.padding * 2};
`;
}
.scss:
.my-class:before {
height: calc(var(--switch-size) * 1px);
}
