view not updating after array changes

I have an array of type {any, FormModule}, which i iterate through to show a list of users along with a form. On ‘ngInit()’, i fetch all the users using a service and populate the list, and then using ngFor to iterate through it in the view. But when i delete or add anything in the array, view is not getting updated.

This is my template file

<div id="accordion">
    <div class="card" *ngFor="let developer of developersAndTheirForm; index as i" [attr.id]="'developerCard'+developer.developer.id">
        <div class="card-header" [attr.id]="'heading'+i">
        </div>
    </div>
</div>

This the component.ts

addDeveloper(formData){
    this.loading=true;
    this.adminService.addDeveloper(formData).subscribe(
      (res)=>{
        this.loading=false;
        this.modalService.dismissAll();
        this.developersAndTheirForm.push({
          developer: res,
          form: new FormGroup({
            firstName: new FormControl(res["user"]["firstName"], [Validators.required]),
                lastName: new FormControl(res["user"]["lastName"], ),
                email: new FormControl(res["user"]["email"], [Validators.email]),
                semester: new FormControl(res["semester"]),
                enrollmentNo: new FormControl(res["enrollmentNo"])
          })
        }
        );
      },
      (res)=>{
        this.loading=false;
      }
    )
  }

And yes the array is getting populated, its just not getting reflected at the view. When I reload the page and ngInit() is called again I can see y newly added element then.

Source: New feed
Source Url view not updating after array changes