Angular での getElementById の置換

1. Angular での getElementById 置換
2. Angular の ElementRef
3. Angular で ElementRef を使用して入力から値を取得する

Angular の getElementById 関数の置き換えを紹介します。

また、入力からドキュメントの要素参照と値を取得するために、Angular に ElementRef 関数を導入します。

Angular での getElementById 置換

getElementById メソッドは、指定された値を持つ ID 属性を持つ要素を返します。このメソッドは HTML DOM で最も一般的であり、ドキュメントを操作したり、情報を取得したり、ドキュメント内の要素を取得したりするたびに使用されます。

getElementById はバニラ Javascript 関数であり、Angular では Typescript を使用しているため、Typescript でのこの関数の置き換えは、このチュートリアルで紹介する ElementRef です。

Angular の ElementRef

ElementRef は、指定された DOM 要素をラップアラウンドして、ネイティブ要素のメソッドとプロパティを拡張できるクラスです。要素を ElementRef として定義すると、nativeElement オブジェクトとしてアクセスできます。

この記事は Angular 4 から Angular 12 と互換性があります。

@ViewChild デコレータを持つクラスで ElementRef Interface を使用して、要素参照を取得しましょう。

まず、app.component.html テンプレートを編集して、次のコードを追加します。

# angular

<div #myNameElem></div>

<button (click)="getValue()">Get Value</button>

出力：

app.component.ts ファイルに、以下を追加します。

#angular
import { Component, VERSION, ViewChild, ElementRef } from "@angular/core";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})

export class AppComponent {
  name = "Angular " + VERSION.major;
  @ViewChild("myNameElem") myNameElem: ElementRef;
  getValue() {
    console.log(this.myNameElem);
    this.myNameElem.nativeElement.innerHTML = "I am changed by ElementRef & ViewChild";
  }
}

出力：

Angular で ElementRef を使用して入力から値を取得する

次に、Angular で ElementRef を使用して入力の値を取得する方法を紹介します。

まず、app.component.html テンプレートを編集して、次のコードを追加します。

# angular
<input type="text" name="name" #myNameElem />
<button (click)="getValue()">Get Value</button>
<button (click)="resetValue()">Reset</button>

出力：

ここで、app.component.ts ファイルに以下を追加します。

#angular
import { Component, VERSION, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  @ViewChild('myNameElem') myNameElem: ElementRef;
  getValue() {
    console.log(this.myNameElem.nativeElement.value);
  }
  resetValue() {
    this.myNameElem.nativeElement.value = '';
  }
}

出力：