AngularでInput要素をcheckboxタイプにしたときのフラグ切り替え制御を行う(ngModel無し)

            
            <input id="hoge" type="checkbox" [checked]="true/falseを指定する">
        

            
            <input id="hoge" type="checkbox"
    [checked]="true/falseを指定する"
    (change)="変化したときのイベントハンドラ" >
        

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

@Component({
    selector: 'app-hoge',
    template: `
    <div>
        <input id="hoge" type="checkbox" [checked]="checkboxes.isHoge" (change)="onCheckedChange($event)">
        <label for="hoge">HOGE</label>
        <input id="piyo" type="checkbox" [checked]="checkboxes.isPiyo" (change)="onCheckedChange($event)">
        <label for="piyo">PIYO</label>
    </div>
    `,
    styleUrls: ['./hoge.component.scss']
})
export class HogeComponent implements OnInit {

    checkboxes: {isHoge: boolean, isPiyo: boolean};

    ngOnInit() {
        this.checkboxes = { isHoge: true, isPiyo: false};
    }

    onCheckedChange(e: any) {
        const selectedInput: string = e.target.id;
        if (/hoge/.test(selectedInput)) {
            this.checkboxes.isHoge = true;
            this.checkboxes.isPiyo = false;
        }
        else if (/piyo/.test(selectedInput)) {
            this.checkboxes.isHoge = false;
            this.checkboxes.isPiyo = true;
        }
    }
}
        

            
            //👇即席でチェックボックスの状態に対応する型を準備
checkboxes: {isHoge: boolean, isPiyo: boolean};

ngOnInit() {
    //👇初期状態を定義
    this.checkboxes = { isHoge: true, isPiyo: false};
}
        

            
            onCheckedChange(e: any) {
    //👇e.target.idから要素のId名を取得してどちらのInput要素か判断
    const selectedInput: string = e.target.id;
    if (/hoge/.test(selectedInput)) {
        this.checkboxes.isHoge = true;
        this.checkboxes.isPiyo = false;
    }
    else if (/piyo/.test(selectedInput)) {
        this.checkboxes.isHoge = false;
        this.checkboxes.isPiyo = true;
    }
}