Angular Pipe - reset checkbox when other options pipe filters selected

I have a list of courses which are displayed through a filterable *ngFor using a filtercourses pipe. I have 5 buttons at the top that trigger the filter to filter the course, 1 for all courses and 4 for specific course categories. The courses data has a property that says it is completed or not. I have added a checkbox to also filter the completed courses.

Problem 1: This works fine on the initial checking but when I uncheck it it does not return the list to unfiltered courses.

Problem 2: The checkbox needs to uncheck every time a button with the other filters are clicked. (I am hoping this can be changed from the template itself using a template reference)

Pipe

@Pipe({
name: 'filtercourses'
})
export class FiltercoursesPipe implements PipeTransform {

transform(items: any[], courseCategory: string): any {    
  if(courseCategory === 'all'){ return items } 
  else if (courseCategory === 'completed') {
    console.log(courseCategory)
    return items.filter(item => {
      return item.completed === true;
    });
  } else    
  return items.filter(item =>{   
    return item.courseCategory === courseCategory;    
  });    return null;
}

}

Template

<div fxLayout="row" fxLayoutAlign="center center">
    <div class="column is-10 grid-center mblg">
        <div class="row" style="margin-top:10px;margin-bottom: 10px;">
            <button class="button is-small is-success mrmd" (click)="filterBy='all'">All</button>

            <button class="button is-small is-info mrmd" (click)="filterBy='Mandatory & Compliance'">Mandatory &
                        Compliance</button>

            <button class="button is-small is-info mrmd" (click)="filterBy='Leadership & Management'">Leadership
                        & Management</button>

            <button class="button is-small is-info mrmd" (click)="filterBy='Personal Effectiveness'">Personal
                        Effectiveness</button>

            <button class="button is-small is-info mrmd" (click)="filterBy='Business Skills'">Business
                        Skills</button>
        </div>

        <div class="field">
            <input id="switchColorSuccess" type="checkbox" name="switchColorSuccess" class="switch is-success"
                        checked="checked" (change)="filterBy='completed'">
            <label for="switchColorSuccess">Completed</label>
        </div>
    </div> 
</div>
<div style="margin: 0 auto;">
    <ul fxLayout="column" fxLayoutAlign="center center">
        <li *ngFor="let course of courses | filtercourses:filterBy">
            <h3></h3>
            <h4></h4>
            <h5 *ngIf="course.completed" style="color: green">COURSE COMPLETED</h5>
            <img src="" class="img" width="200"/>
</li>
    </ul>
</div>

Thanks

I have created this Stackblitz