Get Values through Multiple checkbox using filter

Question

I have a list of students and their courses opted.NOw i need to create a checkbox of those subjects and after clicking a particular subject the list of students who have opted that particular subjects should be displayed.Need to do this just by using FILTER no formControl or any other method. IN HTMl

<div class="container">
<div class="row">
 <div class="col-4 border" (change)="event('change')" *ngFor="let obj of 
 NameBool">
<input type="checkbox" [(ngModel)]="obj.value"> {{obj.name}}<br>
  </div>
 <div class="col-8">
   <div class="row">
    <div class="col-6 bg-dark text-light">Name</div>
    <div class="col-6 bg-dark text-light">Course</div>
    </div>
    <div class="row" *ngFor="let st of showStudents">
    <div class="col-6 border">{{st.name}}</div>
    <div class="col-6 border">{{st.course}}</div>
 </div>
 </div>
 </div>
 </div>

in app.component.ts

 allStudents : Student[]=[
{name:'James',course:'Angular'},
{name:'Kary',course:'Android'},
{name:'Bob',course:'Java'},
{name:'Pam',course:'Java'},
{name:'Steve',course:'Angular'},
{name:'Williams',course:'Android'},
{name:'Julis',course:'Angular'},
{name:'Matt',course:'Java'},
{name:'Willy',course:'Android'},];

NameBool:NameBool[]=[{name:'Angular',value:true},
{name:'Android',value:true},
{name:'Java',value:true},
{name:'ALL',value:true},];
showStudents:Student[]=[];
 showCourses:string[];

 event(s:string){
 console.log(s);
 this.showStudents=this.showStudents.filter(this.showStudents.course===)
 }

below is the url to get complete project and files.

https://stackblitz.com/edit/angulaar-aman

Answer 1

One of the ways of achieving this is to keep track of the check boxes which are selected filter the students array based on the selections.

private showStudentsFromCourse(){
    let selectedCourses: string[] = [];
    const isAllSelected = this.courseOptions.find(course => course.name === 'All').value;
    if (isAllSelected) {
      selectedCourses = this.courses;
    }
    else {
      selectedCourses = this.courseOptions.map(course => {
        if (course.value) {
          return course.name
        }
      }).filter(Boolean);
    }
    this.showStudents = this.allStudents.filter(student => selectedCourses.indexOf(student.course) !== -1 );
  }

Stackblitz code - https://stackblitz.com/edit/angulaar-aman-cwm81d