Home / Questions / 130430
Accepted
gmarsi
Asked: 2020-01-12 10:07:45 +0800 CST 2020-01-12 10:07:45 +0800 CST

Get width of an element using Angular 4

  • 772

I have a component that displays an element with a width of 95% , so depending on the width of the screen it will have some measurements or others.

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

Here is 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 on one site on the entire web, would it be advisable to do it with its own directive?

angular4

1 Answers

  1. Best Answer

    First of all , a directive would be a good idea if you were going to use it more times in the project or for other projects as well. Then I leave you the two alternatives, if you are only going to use it on this occasion, use the option@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 it does here is print the dimensions on the console, when the mouse enters the element, this is just a trigger for the example, you could decide 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);    
  }
}
    • 1