this.students.splice(index,1) is not changing in the UI [Angular]

Question

I am trying to delete a student object I have in a students array in my parent component. The student gets deleted by passing their name to the method. However, the view does not get updated. Here is my code for the delete method using splice

 deleteStudent(name: string) {
    for (var x = 0; x < this.students.length; x++) {
      if (this.students[x].name === name) {
        this.students.splice(x, 1);
        this.students = [...this.students];
        console.log(x);
        return;
      }
    }}

Here is the full code for the parent class:

import { Component, OnInit } from "@angular/core";
import { student } from "../../student";

@Component({
  selector: "app-students",
  templateUrl: "./students.component.html",
  styleUrls: ["./students.component.css"]
})
export class StudentsComponent implements OnInit {
  students: student[] = [
    { name: "Marwa", level: "undergrad" },
    { name: "Heba", level: "undergrad" },
    { name: "Amal", level: "postgrad" }
  ];

  txt = "";
  toBeDeleted: student;

  public undergradsList = this.undergrads();
  constructor() {}

  ngOnInit() {
    this.undergrads();
    console.log(this.undergrads);
  }
  undergrads() {
    var Arrayres = new Array();
    for (var i = 0; i < this.students.length; i++) {
      if (this.students[i].level === "undergrad") {
        Arrayres.push(this.students[i].name);
      }
    }
    console.log(Arrayres);
    return Arrayres;
  }
  deleteStudent(name: string) {
    for (var x = 0; x < this.students.length; x++) {
      if (this.students[x].name === name) {
        this.students.splice(x, 1);
        this.students = [...this.students];
        this.undergradsList = this.undergrads();
        console.log(x);
        return;
      }
    }
    // const studentIndex = this.students.findIndex(e => e.name === name);

    console.log("hi delte");
  }
}

Here is the code for the parent's HTML component:

<h1>{{ txt }}</h1>
<app-under-grads
  (childEvent)="txt = $event"
  [studentList]="undergradsList"
  (studentDeletion)="deleteStudent($event)"
>
</app-under-grads>

Here is the code for my child component:

import { Component, OnInit, Input, EventEmitter, Output } from "@angular/core";
import { student } from "../../student";

@Component({
  selector: "app-under-grads",
  templateUrl: "./under-grads.component.html",
  styleUrls: ["./under-grads.component.css"]
})
export class UnderGradsComponent implements OnInit {
  @Input() public studentList;
  @Output() public childEvent = new EventEmitter();

  constructor() {}

  ngOnInit() {
    console.log(this.studentList);
  }

  sendInfo() {
    this.childEvent.emit("Hello I am sending this to the parent");
  }

  @Output() public studentDeletion = new EventEmitter<string>();
  delete(name: string) {
    //  console.log("delete it");
    this.studentDeletion.emit(name);
    console.log(name);
  }
}

Here is the HTML of my child component which is being rendered on the screen. studentList is an array of strings of names

<h2>UnderGrads</h2>
<div>
  <ul>
    <li *ngFor="let x of studentList">
      {{ x }} <button (click)="delete(x)">X</button>
    </li>
  </ul>
</div>

Answer 1

I assume that undergradsList is the same as students

So in your deleteStudent function

it should be like this

 deleteStudent(name: string) {
    for (var x = 0; x < this.students.length; x++) {
      if (this.students[x].name === name) {
        this.students.splice(x, 1);
        this.undergradsList = [...this.students];
        console.log(x);
        return;
      }
    }}