Estoy generando un li con un ngFor por cada experiencia de trabajo que agrega un usuario a un array y estoy usando una etiqueta pre para mostrar un texto respetando el formato con el que se guardo en caso de que se introdujeran saltos de linea, cree un método para cambiar el color del texto que está en esa etiqueta cuando se selecciona el li que le corresponde, en lo que necesito ayuda es en hacer que cuando se seleccione otro li diferente al li del pre que ya se modificó, vuelva a su color original que en este caso eso negro.
Component.html
<li *ngFor="let xp of xpArray; index as i" id="li{{i}}"
class="list-group-item list-group-item-action flex-column align-items-start"
(click)="openForEditXP(xp); colorPre(i)" [class.active]="xp == selectedXp">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">{{xp.empresa}}</h5>
<small>De {{xp.fecha_inicio}} a {{xp.fecha_fin == '' ?
'Actualmente' : xp.fecha_fin}}</small>
</div>
<p class="mb-1">{{xp.puesto}}</p>
<small class="mb-1">Jefe: {{xp.jefe}} | Tel: {{xp.tel_referencia}}</small>
<div class="row">
<p class="col-md-auto font-weight-bold pr-1">Proyectos:</p>
<pre id="pre{{i}}" class="col pl-0 text-justify">{{xp.proyectos}}</pre>
</div>
</li>
Component.ts
colorPre(i: number) {
if (document.getElementById('li'+i).style.background == "#FFFFFF") {
document.getElementById('pre'+i).style.color = "#000";
} else {
document.getElementById('pre'+i).style.color = "#fff";
}
}
Si no quedó muy clara mi explicación, les diré cómo debe funcionar, cuando yo le doy click a un li, ese se pinta de color negro ya que lo estoy seleccionando y con el método colorPre(i); cambio el color del texto de la etiqueta pre a blanco, ya que originalmente es negro y no se vería, pero cuando seleccione otro li diferente, el texto de la etiqueta pre anterior debe volverse negro otra vez y el de la etiqueta pre que pertenece al nuevo li seleccionado haga el mismo método de pintarse blanco el texto.
active
, crea reglas css para la etiqueta<pre>
que esta dentro delli
que esté activo despues de hacer click. Y en el evento click lo primero que haces es buscar cualquier li que tenga la claseactive
y se la quitas, asi solo 1 estara activo a la vez