Tengo un componente que muestra un elemento con un ancho de 95% por lo que según el ancho de la pantalla tendrá unas medidas u otras.
Como podría obtener el ancho de este elemento desde mi componente?
Os dejo el código de dicho componente:
TemplateUrl (HTML)
<div id="main">
<ul id="usersBox">
<li>
<a>
<div>
<img src="http://lorempixel.com/150/200/people/1" alt="">
<div>
<p>Lucas</p>
<p>C#, Java, TS</p>
<p>5 projects</p>
<p>19 partners</p>
</div>
</div>
</a>
</li>
<li>
<a>
<div>
<img src="http://lorempixel.com/150/200/people/2" alt="">
<div>
<p>
Peter
</p>
<p>Javascript</p>
<p>1 projects</p>
<p>23 partners</p>
</div>
</div>
</a>
</li>
<li>
<a>
<div>
<img src="http://lorempixel.com/150/200/people/3" alt="">
<div>
<p>
Marian
</p>
<p>Python, PHP</p>
<p>2 projects</p>
<p>3 partners</p>
</div>
</div>
</a>
</li>
<li>
<a>
<div>
<img src="http://lorempixel.com/150/200/people/4" alt="">
<div>
<p>
Laura
</p>
<p>SQL, MongoDB</p>
<p>0 projects</p>
<p>1 partner</p>
</div>
</div>
</a>
</li>
<li>
<a>
<div>
<img src="http://lorempixel.com/150/200/people/5" alt="">
<div>
<p>
Marine
</p>
<p>C#, .NET, F#</p>
<p>15 projects</p>
<p>14 partners</p>
</div>
</div>
</a>
</li>
<li>
<a>
<div>
<img src="http://lorempixel.com/150/200/people/6" alt="">
<div>
<p>
Sandrah
</p>
<p>COBOL</p>
<p>31 projects</p>
<p>194 partners</p>
</div>
</div>
</a>
</li>
<li>
<a>
<div>
<img src="http://lorempixel.com/150/200/people/7" alt="">
<div>
<p>
Tiffany
</p>
<p>Scala, GO</p>
<p>0 projects</p>
<p>0 partners</p>
</div>
</div>
</a>
</li>
<li>
<a>
<div>
<img src="http://lorempixel.com/150/200/people/8" alt="">
<div>
<p>
Michael
</p>
<p>R, C, C++</p>
<p>6 projects</p>
<p>17 partners</p>
</div>
</div>
</a>
</li>
</ul>
</div>
styleUrls (CSS)
@import '../../scss/_mixins.scss';
@import '../../scss/_variables.scss';
@import '../../scss/_reset.scss';
@import '../../scss/_placeholders.scss';
@import '../../scss/_general.scss';
#main{
width: 95%;
height: 233px;
padding: 100px 0px 0px 0px;
margin: 0px 2.5% 0px 2.5%;
overflow: auto;
margin-bottom: 30px;
ul#usersBox{
display: table;
white-space: nowrap;
list-style: none;
margin: 0 auto;
li{
display: table-cell;
text-align: center;
padding: 5px;
a > div {
width: 150px;
height: 200px;
position: relative;
@include border-radius(5px);
img{
position: absolute;
top: 0;
left: 0;
width: 100%;
@include border-radius(5px);
}
div{
width: 100%;
height: 50%;
bottom: 0;
left: 0;
position: absolute;
padding-top: 30px;
line-height: 3;
transition: 0.25s;
cursor: pointer;
text-overflow: hidden;
overflow: hidden;
background: $whitetransparent;
&:hover{
transition: 0.25s;
height: 100%;
}
}
}
}
}
}
Componente
import { Component, OnInit, ElementRef } from '@angular/core';
@Component({
selector: 'app-explore',
templateUrl: './explore.component.html',
styleUrls: ['./explore.component.scss']
})
export class ExploreComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Aún y siendo una acción que se realiza únicamente en un sitio de toda la web, sería recomendable hacerlo con una directiva propia?