AngularのViewChildで取得した要素の幅や高さを表示する

HTML要素の幅や高さを%などで指定している場合、Angular側でサイズがわからなくて困る時がある

バージョン情報

Angular: 5.0.3
node: 8.1.4
macOS High Sierra(10.13.3)
Ionic: 3.9.2

サイズ取得方法

f:id:l08084:20180304201009p:plain

CSSのパーセント指定でサイズを設定した画像（鳥）の幅と高さを取得する

.bird {
    height: 30%;
    width: 30%;
}

ElementRef.nativeElementでDOMの情報を取得することができる。

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'page-home',
  template: `<img #bird class="bird" src="assets/imgs/bird.png">`
})
export class HomePage implements AfterViewInit {

  @ViewChild('bird') bird: ElementRef;

  constructor(public navCtrl: NavController) {}
  
  ngAfterViewInit() {
    // ElementRef.nativeElementでDOMの情報を取得
    const height = this.bird.nativeElement.offsetHeight;
    const width = this.bird.nativeElement.offsetWidth;
    // ViewChildで取得した要素のサイズを表示する
    console.log(`height: ${height}`);
    console.log(`width: ${width}`);
  }
}