Angularでhubspotフォームがfooterの下に来る問題の解消

formのセレクターを選択していなかったので、なぜかfooterの下にformが生成される問題に直面してましたが、結構簡単に解決できました。

import { AfterContentInit, Component, OnInit } from '@angular/core';

declare var hbspt: any;
@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.scss']
})
export class ContactComponent implements OnInit, AfterContentInit {

  constructor() { }

  ngOnInit(): void {
  }

  ngAfterContentInit(): void {
    hbspt.forms.create({
      portalId: '====',
      formId: '====',
      target: '#hubspotForm' // ここにformのidを入れる。これ重要
    });
  }
}

// html

<div id="hubspotForm"></div>

参考記事

Forms and Angular
Form in the wrong place on external page