Tengo una duda con Angular. En realidad, mas con CSS. La cuestión es la siguiente. Tengo en una página 2 columnas. En la primera a la izquierda puedo ver cierta información de clientes (es un listado) y la idea es que cuando el usuario haga un 'hover' sobre cada uno de ellos en la columna de la derecha se muestre un DIV con los detalles de los clientes. Para esto pienso crear un servicio a través del cual debería filtrar el cliente sobre el que se hizo el hover y devolver la información completa del mismo. Pero mi duda es, luego en la columna de la derecha, como hago para que se vaya mostrando a la altura desde donde se hizo el 'hover'? Espero se entienda mi pregunta. Adjunto HTML
<div class="loading">
<app-loading-spinner *ngIf="!owners"></app-loading-spinner>
</div>
<div>
<div class="wrapper">
<!-- left column -->
<div class="owners-container">
<div class="owner" *ngFor="let owner of owners">
<p>
<strong> Full name:</strong> {{ owner.first_name }}
{{ owner.last_name }} <strong>| Gender:</strong> {{ owner.gender }}
<strong> | Status:</strong> {{ owner.status }}
</p>
</div>
</div>
<!-- right column -->
<div class="owners-details-container">
<div>
<h2>Nombre del owner</h2>
<p>Mas datos sobre el owner</p>
<p>Mas datos sobre el owner</p>
<p>Mas datos sobre el owner</p>
<p>Mas datos sobre el owner</p>
<p>Mas datos sobre el owner</p>
</div>
</div>
</div>
</div>
Y el CSS hasta el momento.
.loading {
display: grid;
place-content: center;
}
.owner {
border: 2px solid black;
padding: 1em;
}
.owner:hover {
background-color: lightgray;
cursor: pointer;
}
.owners-container {
width: 40%;
margin-bottom: 10em;
}
.owners-details-container {
border: 2px solid black;
padding: 2em;
width: 40%;
height: 40vh;
}
.wrapper {
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-around;
margin: 2em;
}