Angular 17: Bootstrap5 modal launch on page load

Question

I am using Angular 17 and Bootstrap 5 to launch a modal on page load. I was able to launch the modal on button click but when I tried hiding the button and launching the modal, received an error

document is not defined

My Modal.HTML file

<div
  class="modal fade"
  id="staticBackdrop"
  data-bs-backdrop="static"
  data-bs-keyboard="false"
  tabindex="-1"
  aria-labelledby="staticBackdropLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5 text-dark" id="staticBackdropLabel">
          Select User
        </h1>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body text-dark">
        <div class="form-check">
          <input
            class="form-check-input"
            type="radio"
            name="flexRadioDefault"
            id="User1"
            value="User 1"
            (change)="onRadioChange($event)"
          />
          <label class="form-check-label" for="User1"> User 1 </label>
        </div>
        <div class="form-check">
          <input
            class="form-check-input"
            type="radio"
            name="flexRadioDefault"
            id="User2"
            value="User 2"
            (change)="onRadioChange($event)"
          />
          <label class="form-check-label" for="User2"> User 2 </label>
        </div>
        <div class="form-check">
          <input
            class="form-check-input"
            type="radio"
            name="flexRadioDefault"
            id="User3"
            value="User 3"
            (change)="onRadioChange($event)"
          />
          <label class="form-check-label" for="User3"> User 3 </label>
        </div>
        <div class="form-check">
          <input
            class="form-check-input"
            type="radio"
            name="flexRadioDefault"
            id="User4"
            value="User 4"
            (change)="onRadioChange($event)"
          />
          <label class="form-check-label" for="User4"> User 4 </label>
        </div>
        <div class="form-check">
          <input
            class="form-check-input"
            type="radio"
            name="flexRadioDefault"
            id="User5"
            value="User 5"
            (change)="onRadioChange($event)"
          />
          <label class="form-check-label" for="User5"> User 5 </label>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" data-bs-dismiss="modal">
          Submit
        </button>
      </div>
    </div>
  </div>
</div>

My Component.TS file

import { Component } from '@angular/core';
import { Modal } from 'bootstrap';
import { CookieService } from 'ngx-cookie-service';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-popup-modal',
  standalone: true,
  imports: [],
  templateUrl: './popup-modal.component.html',
  styleUrl: './popup-modal.component.scss',
})
export class PopupModalComponent {
  selectedUser: string = '';

  constructor(private cookieService: CookieService) {}

  ngOnInit() {
    const modalElement = document.getElementById(
      'staticBackdrop'
    ) as HTMLElement;
    const modal = new Modal(modalElement);
    modal.show();
  }

  onRadioChange(event: any) {
    this.selectedUser = event.target.value;
    this.cookieService.set('CurrentUser', this.selectedUser);
    console.log(this.cookieService.get('CurrentUser'));
  }
}

Error:

I have recently moved from Next.js to Angular. Any help is much appreciated. Thanks :)