Application gets stuck each time.

[adnanrafique]

Bug Report or Feature Request (mark with an x)

- [ ] Regression (a behavior that used to work and stopped working in a new release)
- [ ] Bug report -> please search issues before submitting
- [ ] Feature request
- [ ] Documentation issue or request

Bug report

I am using angular 7. In my application I have a bootstrap modal with the users list and in that modal I've implemented search filter. Modal works fine untill I apply filterBy in the ngFor loop

My code is as follows.

Typescript:
//declaration
individualSearchFilter: any = {first_name:''};

//Users List array
this._api.students_list(this.course_id).subscribe(
data => { this.studentsList = data;
} );

And In my HTML:
Search field:
<div class="modal-header"> <h5>Select User</h5> <div class="userSearchField"> <input type="text" [(ngModel)]="individualSearchFilter.first_name" name="first_name" class="form-control" placeholder="Search by first name"> </div> </div>

ngFor Loop:

<div *ngFor="let student of studentsList | filterBy:individualSearchFilter">...</div>

When I click on the button to open the modal containing users list and search modal does not open and system gets stuck. There is nothing wrong with the modal. When I remove

filterBy:individualSearchFilter

from the ngFor Loop everything works fine except the search(obviously).

Please let me know what I am doing wrong.