How to dynamically change time format from 12 hour to 24 hour or vice versa

[ParulChak]

I am using the angular version of flatpicker. In this I want a functionality like changes the time format from 24h to 12 h or vice versa by using external button of time format.

.ts code configuration of flatpicker
` ```
dateTimePicker: FlatpickrOptions = {
altInput: true,
altInputClass: 'flatPicker',
enableTime: true,
altFormat: 'M j, Y H:i',
dateFormat: 'Y-m-d H:i',
minDate: 'today',
time_24hr: true,
defaultDate: new Date().ISOString(),
disableMobile: true
};

toggleTimeFormat(value) {
if(value === '12h') {
this.dateTimePicker.time_24hr = false;
this. dateTimePicker,altFormat: 'M j, Y H:i',
dateTimePicker.dateFormat: 'Y-m-d H:i',
}
}

`.html code of flatpicker`
    ` ```
<ng2-flatpickr [config]="dateTimePicker"
                       formControlName="date" >
        </ng2-flatpickr>
      <div class=" m-0 p-0">
          <button [ngClass]="{'tabColor': timeFormat === '12h'}"
                  class="p-2 pl-3 pr-3 rounded-left border-right-0"
                  (click)="toggleTimeFormat('12h')">
            12 HOURS
          </button>
      </div>
      <div class="m-0 p-0">
          <button [ngClass]="{'tabColor': timeFormat === '24h'}"
                  class="p-2 pl-3 pr-3 rounded-right border-left-0"
                  (click)="toggleTimeFormat('24h')">
            24 HOURS
          </button>
      </div>

Anybody suggest me, how I can achieve this?