I'm making an onboarding screen using Intro.js. In this screen, I want to receive an input from the user. However, to do this, when I add an input to the screen of intro.js, I cannot assign the data in it to the property of the class. [(ngModel)] = checked, [(checked)] = checked, (checked) = checked the results I've tried so far and failed, can you help or is this possible ?

import {Injectable} from '@angular/core';
import * as IntroJs from 'intro.js/intro.js';

@Injectable({
    providedIn: 'root'
})
export class IntrojsService {

    introJs = null;
    checked = false;
    
    constructor() {
    }
    
    welcome() {
        this.introJs = IntroJs();
        this.introJs.start();
        this.introJs.setOptions({
            tooltipClass: 'customTooltip',
            steps: [
                {
                    title: '<img src="../../assets/default-logo.png" alt="logo" class="logo">',
                    intro: '<div class="tooltip-container">\n' +
                        '\n' +
                        '    <div class="tooltip-body">\n' +
                        '        <p>Welcome to the site!</p>\n' +
                        '        <input type="checkbox" ngModel #checked"/>\n' + //input here
                        '    </div>\n' +
                        '</div>\n',
                },
            ],
        }).oncomplete(() => {
            console.log(this.checked);
        }).start();
    }
}

What I want is for the value in the input to be assigned to the "checked" property of the class.