Obtain width of an element using Angular 4

Question

Obtain width of an element using Angular 4

Navigation

#1 by (1 votes)

0

I have a component that shows an element with a width of 95% so that according to the width of the screen it will have some measurements or others.

How could I get the width of this element from my component?

I leave the code for that component:

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%;
                    }
                }
            }
        }
    }
}

Component

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() {
  }

}

Even though it is an action that is carried out only in a site of the whole web, it would be advisable to do it with an own directive?

angular4

asked by gmarsi 11.01.2018 в 19:07

source

1 answer

Do not upload image to MySQL PHP database Intervals of time between records

score 1 · Accepted Answer

First , a directive would be a good idea if you were to use it more times in the project or for other projects. Then I leave the two alternatives, if you only use it this time use the option of @ViewChild

Solutions:

Direct in the 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>

Directive:

What you do here is to print the dimensions by console, when the mouse enters the element, this is just a trigger for the example you could decide on when to activate it.

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);    
  }
}