Showing confirmation before changing checkbox value in angular2

I am trying to implement a confirmation dialog in my application. I am currently a bit confused about what to do with the logic.

UserDetailsComponent.ts

import { Component, OnInit, OnDestroy, ViewChild, Input, OnChanges, SimpleChange  } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ModalDirective } from 'ng2-bootstrap/modal/modal.component';

import { ApiService } from '../../assets/services/api.service';

import { UserDetails } from '../../assets/classes/controller-details';

@Component({
  selector: 'app-user-details',
  templateUrl: './user-details.component.html',
  styleUrls: ['./user-details.component.scss']
})
export class UserDetailsComponent implements OnInit, OnDestroy, OnChanges {

    @Input('cmd') cmd_s: boolean;
    changeLog: string[] = []

    userDetailForm: FormGroup; 

    id: any;
    data: UserDetails = new UserDetails();

    submitted = false;
    active = false;

    private sub: any;

    constructor(
      private route: ActivatedRoute,
      private apiService: ApiService,
      private fb: FormBuilder) {}

    ngOnInit() {
      this.sub = this.route.params.subscribe(params =>{
        this.id = params['id']; //console.log(this.id);
        this.getData(this.id);
      })
    }

    ngOnDestroy(){
      this.sub.unsubscribe();
    }

    confirmDialog(e){
      if(e.target.checked){
        console.log('changing to on');
        this.active = true;
      }else{
        console.log('chenging to off');
        this.active = true;
      }
      this.active = false;
    }

    toOn(){
      this.controllerDetailForm.controls['status'].setValue(1);
      console.log('Changed to on');
    }

    toOff(){
      this.controllerDetailForm.controls['status'].setValue(0);
      console.log('Changed to off');
    }

    createForm(){
      this.controllerDetailForm = this.fb.group({
        id: [this.data.id],
        name: [this.data.name, Validators.required],
        status: [this.data.status, ]
      });
    }
}

      

        
        
        
      

    

I created three functions confirmationDialog()

, toOn()

, toOff()

for the management of the value before and after the change. I thought it might help, but I have to do it, however now I realized that something was wrong there.

Below is my modal.

Modal

<input type="checkbox" #status formControlName="status" class="switch-input" [checked]="data.status" (change)="confirmDialog($event)">

<div bsModal #smallModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Confirmation</h4>   
                <button type="button" class="close" (click)="smallModal.hide()" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form class="form-horizontal">
                <div class="modal-body">
                    <p>Are you sure you wan't to change?</p>    
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" value="Yes" (click)="onConfirmation() ">
                    <button type="button" class="btn btn-secondary" (click)="smallModal.hide()">No</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

      

        
        
        
      

    

Example, If the current state is enabled, the confirmation dialog should have:

• Yes button to disable it.
• While the "No" button will return / prevent changes

What would be the best way to give a toggle change confirmation dialog?

Any help is appreciated, thanks in advance!