How can I select all and deselect all in a nested form array?

I have dynamic formArrays inside dynamic formArrays: A formArray of courses where each course has a formArray of students.

ngOnInit() {
        this.assignForm = this.fb.group({
            courses: this.fb.array([])
        });

        this.setCourses();
    }

The forms are built from the data, this.courses, which is retrieved from the server.

setCourses() {
        const control = <FormArray>this.assignForm.controls.courses;
        if (this.courses) {
            this.courses.forEach(course => {
                control.push(
                    this.fb.group({
                        courseAssign: false,
                        courseDueDate: "dueDate",
                        students: this.setStudents(course)
                    })
                );
            });
        }
    }

setStudents(course) {
        const studentArray = new FormArray([]);
        course.students.forEach(student => {
            studentArray.push(
                this.fb.group({
                    studentAssign: false,
                    studentDueDate: "dueDate"
                })
            );
        });
        return studentArray;
    }

Here is my HTML:

<form [formGroup]="assignForm" (ngSubmit)="onSubmit()">
    <div fxLayout="row" fxLayoutAlign="end center" class="assign-btn-container">
        <button
            mat-raised-button
            color="primary"
            type="submit">
            Assign
        </button>
    </div>

    <div formArrayName="courses">
        <mat-expansion-panel
            #expPanel
            *ngFor="let course of courses; let i = index"
            [formGroupName]="i">
            <mat-expansion-panel-header>
                <div class="panel-header-text">
                    <div class="course-name">
                            
                    </div>

                    <div class="course-opts">
                        <!-- Course Assign -->
                        <div fxFlex>
                            <mat-checkbox
                                formControlName="courseAssign"
                                (click)="$event.stopPropagation()"
                                (change)="$event ? toggleAssignCourse($event, course, i) : null">
                                Assign
                            </mat-checkbox>
                        </div>

                        <!-- Course Due Date/Time -->
                        <div fxFlex>
                            <input type="text"
                                placeholder="Due Date & Time"
                                formControlName="courseDueDate"/>
                        </div>
                    </div>
                </div>
            </mat-expansion-panel-header>

            <div formArrayName="students">
                <div
                    *ngFor="let student of course.students; let s = index"
                    [formGroupName]="s">
                    <div class="student-name">
                         
                    </div>

                    <mat-action-row class="assignment-opts">
                        <!-- Student Assign -->
                        <div fxFlex>
                            <mat-checkbox
                                formControlName="studentAssign"
                                (change)="toggleAssignStudent($event, course, student, s)">
                                Assign
                            </mat-checkbox>
                        </div>

                        <!-- Student Due Date/Time -->
                        <div fxFlex>
                            <input type="text"
                                placeholder="Due Date & Time"
                                formControlName="studentDueDate"/>
                        </div>
                    </mat-action-row>
                </div>
            </div>
        </mat-expansion-panel>
    </div>
</form>

In the HTML, a course Assign checkbox triggers toggleAssignCourse. And in my class, I tried:

toggleAssignCourse(event, course: Course, i) {
        this.assignForm.value.courses[i].students.map(student => {
            student.studentAssign = true;
        });
    }

This gives the following error: Cannot assign to read only property 'studentAssign' Beyond this attempt, I have tried several other things--too many to list and probably horrible ideas. :(

When a user clicks on the course Assign checkbox, I'm trying to figure out how to select all the students in that course if none or only some students are selected. If the course Assign checkbox is clicked again, all students are deselected.

Any help with this is gratefully appreciated! Thank you in advance.