Невозможно загрузить карту полосы в элемент DOM Angular

Question

Я хочу отображать полосу карты, если пользователь выбирает переключатель полосы. Но я получаю сообщение об отсутствии элемента DOM. Кто-нибудь может сказать, почему элемент DOM не загружается даже после того, как я изменил статус selectPayment

Мой интерфейс

core.js:6014 ERROR IntegrationError: указанный вами селектор (#card-element) не применяется ни к каким элементам DOM, которые в данный момент находятся на странице. Перед вызовом mount() убедитесь, что элемент существует на странице.

Это мой HTML

    <form class="mb-5" novalidate [formGroup]="paymentForm">
      <h3 class="pb-5">Please do the payment !!</h3>
        <div class="form-group">
            <input type="text" class="form-control" formControlName="name" placeholder="Full Name*" required>
            <span class="text-danger" *ngIf="paymentForm.get('name').hasError('required') && submitted"> Full Name is
                required</span>
        </div>
        <div class="form-group">
            <input type="number" class="form-control" formControlName="amount" placeholder="Amount*" required>
            <span class="text-danger" *ngIf="paymentForm.get('amount').hasError('required') && submitted"> Amount is
                required</span>
        </div>
        <div class="form-group">
          <input class="form-control" type="text" formControlName="email"  placeholder="Email*">
          <span class="text-danger" *ngIf="paymentForm.get('email').hasError('required') && submitted"> Email is
            required</span>
        </div>

        <div class="form-inline form-group">
          <div class="form-check border bg-primary text-white p-2 mr-3">
            <input class="form-check-input" type="radio" name="paymentGateway" id="razorPay" value="razorPay" (change)="selectPaymentType($event)">
            <label class="form-check-label" for="razorPay">
              Razor Pay
            </label>
          </div>
          <div class="form-check border bg-success text-white p-2">
            <input class="form-check-input" type="radio" name="paymentGateway" id="stripe" value="stripe" (change)="selectPaymentType($event)">
            <label class="form-check-label" for="stripe">
              Stripe
            </label>
          </div>
        </div>

        <div class="form-group border p-2" *ngIf="selectPayment=='stripe'">
            <div id="card-element" class="field"></div>
        </div>

        <div class="d-flex justify-content-center">
          <button class="btn btn-warning border shadow" type="submit" (click)="buy()">
            Buy
          </button>
        </div>
      </form>

Это машинописный код

  createStripeCard(){
    this.stripeService.elements(this.elementsOptions)
    .subscribe(elements => {
      this.elements = elements;
      if (!this.card) {
        this.card = this.elements.create('card', {
          iconStyle: 'solid',
          style: {
            base: {
              iconColor: '#666EE8',
              color: '#31325F',
              lineHeight: '40px',
              fontWeight: 300,
              fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
              fontSize: '18px',
              '::placeholder': {
                color: '#CFD7E0'
              }
            }
          },
        });
        this.card.mount('#card-element');
      }
    });
  }

  selectPaymentType(event: any) {
    this.selectPayment = event.target.value;
    if(this.selectPayment=='stripe'){
      this.createStripeCard();
    }
  }