Sweetalert2 text property doesn't pass ngModel value

Hello i am trying to pass a value (1 or 2 or 3) from input using NgModel through Sweetalert2 and it's text property but the value is always 0 Any help?

here is the code

    reason: number = 0;
    btn1: any;
    btn2: any;
    btn3: any;

    const steps = ['1', '2', '3']
        const Queue = Swal.mixin({
          progressSteps: steps,
          backdrop:false,
          confirmButtonText: 'Next >',
          customClass: 'height-auto',
          // optional classes to avoid backdrop blinking between steps
          showClass: { backdrop: 'swal2-noanimation' },
          hideClass: { backdrop: 'swal2-noanimation' }
        })
        
        await Queue.fire({
          title: '<b style="font-size:17px!important;">' + this.translation.first_select_why_you_want_to_block_this_member + '</b><br />',
            html: '<br /><ion-textx [(ngModel)]="btn1" [ngClass]="btn1" id="btn1" [value]="1"><a tabindex="1">' + this.translation.rude_or_inappropriate_language + '</a></ion-textx>' + '<br /><br />' +
              '<ion-textx [(ngModel)]="btn2" [ngClass]="btn2" id="btn2" [value]="3"><a tabindex="1">' + this.translation.fake_or_spam_profile + '</a></ion-textx>' + '<br /><br />' +
              '<ion-textx [(ngModel)]="btn3" [ngClass]="btn3" id="btn3" [value]="2"><a tabindex="1">' + this.translation.violent_or_strange_behaviour + '</a></ion-textx>' + '<br /><br />',
          currentProgressStep: 0,
        })
          .then((result: any) => {
              if (this.btn1) {
              this.reason = 1;
            }
            else if (this.btn2) {
              this.reason = 2;
            }
            else if (this.btn3) {
              this.reason =  3;
            }

if (result.value) {
                  Swal.fire({
                    title: this.translation.are_you_sure_you_want_to_send_this_report,
                    backdrop: false,
                    confirmButtonText: '<b style="font-family:Arial;color: whitesmoke;font-size:15px">' +this.translation.send_your_repost+ '</b>',
                  }).then(() => {
                    let report = {
                      reason: this.reason,
                    };

user.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { UserPageRoutingModule } from './user-routing.module';

import { UserPage } from './user.page';
import { LazyLoadImageModule } from 'ng-lazyload-image';
import { ComponentsModule } from 'src/app/components/components.module';
import { PipesModule } from 'src/app/pipes/pipes.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    UserPageRoutingModule,LazyLoadImageModule,
    ComponentsModule,
    PipesModule
  ],
  declarations: [UserPage],
  schemas:[CUSTOM_ELEMENTS_SCHEMA]
})
export class UserPageModule {}

I want to ask why the value isn't passed with the ngModel. It should be 1 or 2 or 3.

I could be a that i haven't inserted the Ngmodule or ionicModule in user.module.ts but i did. Anything else?

I know that i have to keep the value before it goes to the next step but how do i do that? I tried onRender but it shows an error that i cannot use onRender on the latest swal2