0

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?

1 respuesta 1

1

En primer lugar, una directiva seria una buena idea si fueras a usarlo mas veces en el proyecto o también para otros proyectos. A continuación te dejo las dos alternativas, si solo lo vas a usar en esta ocasión usa la opción de @ViewChild

Soluciones:

Directo en el Component

ExploreComponent.component.ts:

export class ExploreComponent implements OnInit {
    constructor() { }

    @ViewChild('main')
    main: ElementRef;

    ngAfterViewInit() { //Recién en este punto tendrás acceso al valor
            console.log(this.main.nativeElement.offsetWidth);
    }

    ngOnInit() {
    }

}

HTML

<div #main id=main>
......
</div>

Directiva:

Lo que hace aquí es imprimir por consola las dimensiones, cuando el mouse entre al elemento, esto es solo un trigger para el ejemplo tu podrías decidir en que momento activarlo.

import { Directive,ElementRef,Renderer,  HostListener} from '@angular/core';

@Directive({
  selector:"[ancho]",
})

export class WidthDirective{

  constructor(private el:ElementRef){

  }
  @HostListener('mouseenter') onMouseEnter(){
    console.log(this.el.nativeElement);

    console.log('Alto-->' + this.el.nativeElement.offsetHeight);  
    console.log('Ancho-->' + this.el.nativeElement.offsetWidth);    
  }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.