Strategy Pattern in Angular

strategy-pattern-in-angular.ts

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

@Component({
  selector: 'my-app',
  template: `
  <h1>Strategy design Pattern</h1> 
  <mat-slide-toggle  color="primary" [checked]="true" (change)="toggleHandler($event.checked)">
   Compress Images
  </mat-slide-toggle> <br><br><br>
  <input type="file" accept="image/*" multiple="" id="file" (change)="uploadFile($event)" />
  `,
})
export class AppComponent {
  isChecked = true;

  toggleHandler(isChecked: boolean) {
    this.isChecked = isChecked;
  }
  
  uploadFile(event) {
    const filesArray = Array.from((<HTMLInputElement>event.target).files);
    this.isChecked
      ? this.compressAndProcessFiles(filesArray)
      : this.processFiles(filesArray);
  }
  
  compressAndProcessFiles(filesArray: File[]) {
    console.log('processing compressed files');
  }
 processFiles(filesArray: File[]) {
    console.log('processing files');
  }
}