A tu pregunta ¿Cómo cambiar el color del input file vacío si están
dentro de un ngFor?
Propongo dos soluciones una ocultando el Input
Tenes alguna dificultad adicional por la cual mi respuesta no te es de
utilidad?
1.Esta solucion la podes ver desplegada en
input-file
Mi repo con el código en git repo
El problema con este tipo de entrada de archivo simple es que, por
defecto, es muy difícil de diseñar. ¡Algunos estilos aplicados no se
pueden cambiar se complica aun mas al usar un *ngFor con el cual poder manejar los estilos en forma individual de cada item por eso uso los recursos propios de Angular
Por eso aplico la teoria dada en Angular University
Donde se muestra la forma de ocultar del usuario al input file y luego crear una interfaz de usuario para cargar al archivo
El codigo que pensé ocultara al input de acuerdo al tutorial sin perder su funcionalidad le agregue que al hacer click en el boton subirá el archivo y pintara solo al boton seleccionado de rojo Al seleccionar otro botón se mantendrán los seleccionados pintados y se pintara al nuevo boton seleccionado.Me parece mejor ir pintando a medida que seleccionamos que partir de todos pintados para despintarlos al seleccionarlos Permutando la respuesta del true de la condición pueden obtenerse tambien esto ultimo.
En tu codigo se complica por el *ngfor al usar Jquery lo cual ademas
no se aconseja en Angular
//ts
weekDays = ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo'];
onFileSelected($event:Event,indexOfelement:number){
console.log('$event:-->',$event,'indexOfelement:',indexOfelement);
}
getColorIndex($event:Event,indexOfelement:any):string{
console.log('indexOfelement:',indexOfelement)
return ''
}
//html
<ul *ngFor="let day of weekDays;let indexOfelement=index">
<input class="file-input"
onchange="console.log('onchange',event.target.files)"
name="{{indexOfelement}}"
(change)="onFileSelected($event,indexOfelement)"
type="file" id="{{indexOfelement}}" #fileUpload ngDefaultControl>
<button mat-mini-fab color="primary" class="upload-btn"
[ngStyle]="{
'background-color':selectedItem == indexOfelement?
'#FF0000' :'getColorIndex($event,indexOfelement)'
}"
(click)="fileUpload.click()" ngDefaultControl name="{{indexOfelement}}" id="{{indexOfelement}}" >
<mat-icon>attach_file</mat-icon>
</button>hola {{color}}
</li>
</ul>
2. Si ocultar al Input
El codigo no esta desplegado por lo simple de la solucion
//scss
input[type=file]::-webkit-file-upload-button {
border: 1px solid grey;
background: #d6eed1;
}
//ts
selectedInput!:number;
onlyInput($event:Event,indexOfelement:number){
this.selectedInput=indexOfelement;
const element = $event.target as HTMLInputElement;
console.log('id:',($event.target as Element).id);
element.setAttribute("style", "color:white;background-color:olive ; border: 10px solid yellow" );
}
//HTM
<div>
<ul *ngFor="let day of weekDays;let indexOfelement=index">
<li>{{day}}
<input onchange="console.log('onchange',event.target.files)"
name="{{indexOfelement}}"
(change)="onlyInput($event,indexOfelement)"
type="file" id="{{indexOfelement}}" >
</li>
</ul>
</div>