Angularで他要素のheightを取得し割り当てるには

Question

前提・実現したいこと

Angular初心者です。
動的に高さを揃えなくてはいけなくなったので、
Angularにて html上の.hogeのheightを取得し、.fugaのheightに割り当てたいです。
(cssだけでは解決しないhtml構成だと思ってください)

試したこと

ngAfterViewInit() {
  const height = document.getElementsByClassName("hoge")[0]?.clientHeight;
  document.getElementsByClassName("fuga")[0]?.style.height = height + 'px';
}

fugaへの処理に対して、代入式の左辺には、省略可能なプロパティ アクセスを指定できません。と怒られるので断念

document.getElementsByClassName("fuga")[0]?.style.height;

の時点で、プロパティ 'style' は型 'Element' に存在しません。と怒られる。

classでなくIdにして試してみると、

ngAfterViewInit() {
  const height = document.getElementById("hoge")?.clientHeight;
  document.getElementsById("fuga")?.style.height = height + 'px';
}

同様に代入式の左辺には、省略可能なプロパティ アクセスを指定できません。と怒られる。

しかし、

document.getElementById("fuga")?.style.height;

で、エラーは出なくなります。

初心者すぎてどのように書けば良いのかわからず、対応方法をご教示いただけますと幸いです。
そもそもAngularのこの機能でいけるなどでも大丈夫です。

Answer 1

プロパティ 'style' は型 'Element' に存在しません。と怒られる。

HTMLElementにキャストする必要があります。

代入式の左辺には、省略可能なプロパティ アクセスを指定できません。

document.getElementsById("fuga")の存在が明らかではないからです。
if文でdocument.getElementsById("fuga")の結果に対して存在チェックを入れるか、!を使って以下のように存在を確定させる必要があります。

document.getElementsById("fuga")!.style.height = height + 'px';

ただしこの場合、document.getElementsById("fuga")の結果が存在しない場合は実行エラーになります

Comments

[owatata]

HTMLElementなんてあるのですね。
以下のようにしてできました。ありがとうございます。

const height = document.querySelector<HTMLElement>(".hoge")?.clientHeight;
document.querySelector<HTMLElement>(".fuga")!.style.height = height + 'px'