Angular Search/Filter items from Array with input field

Issue

<div class="container">
  <table>
    <thead>
      <div class="searchfield">
        <input
          type="text"
          [(ngModel)]="firstName"
          (input)="Search()"
          placeholder="Search"
        />
      </div>
    </thead>

    <tbody>
      <tr>
        <th (click)="sortItems(entry.id)" scope="row">ID</th>
        <td (click)="sortItems(entry.firstName)" colspan="2">
          <label for="taskbar">Name</label>
        </td>
        <td (click)="sortItems(entry.secondName)" colspan="2">
          <label for="taskbar">Vorname</label>
        </td>
        <td (click)="sortItems(entry.firstMobileNumber)" colspan="2">
          <label for="mobileNumber">Mobilfunknummer 1 </label>
        </td>
        <td (click)="sortItems(entry.secondMobileNumber)" colspan="2">
          <label for="secondMobileNumber">Mobilfunknummer 2 </label>
        </td>
        <td (click)="sortItems(entry.firstEmail)" colspan="2">
          <label for="email">E-Mail 1 </label>
        </td>
        <td (click)="sortItems(entry.secondEmail)" colspan="2">
          <label for="email">E-Mail 2 </label>
        </td>
        <td (click)="sortItems(entry.roomNumber)" colspan="2">
          <label for="roomNumber">Raumnummer </label>
        </td>
        <td (click)="sortItems(entry.task)" colspan="2">
          <label for="task">Aufgabe </label>
        </td>
      </tr>

      <tr *ngFor="let entry of listOfContacts">
        <!-- Nur die Kopie wird angezeigt! -->

        <th scope="row">{{entry.id}}</th>

        <td colspan="2">{{entry.firstName}}</td>
        <td colspan="2">{{entry.secondName}}</td>
        <td colspan="2">{{entry.firstMobileNumber}}</td>
        <td colspan="2">{{entry.secondMobileNumber}}</td>
        <td colspan="2">{{entry.firstEmail}}</td>
        <td colspan="2">{{entry.secondEmail}}</td>
        <td colspan="2">{{entry.roomNumber}}</td>
        <td colspan="2">{{entry.task}}</td>
        <td>
          <button
            class="buttonDelete"
            (click)="openDialogDelete(entry.id)"
            color="warn"
          >
            Delete
          </button>
        </td>
        <td>
          <button (click)="openDialogEdit(entry.id)" class="btn btn-secondary">
            Edit
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  <button class="buttonAdd" (click)="openDialogAdd()">Add</button>
</div>

export class TableListComponent implements OnInit {
  entry: ContactListEntry = {
    id: null,
    firstName: '',
    secondName: '',
    firstMobileNumber: '',
    secondMobileNumber: '',
    firstEmail: '',
    secondEmail: '',
    roomNumber: '',
    task: '',
    notes: '',
  };

  listOfContacts = [];
  firstName: string;

  constructor(private dataServiceService: DataServiceService, private dialog: MatDialog) {
    this.listOfContacts = this.dataServiceService.getContacts();
  }

  ngOnInit(): void {
    this.listOfContacts = this.dataServiceService.getContacts();
  }

  Search() {
    if (this.firstName != '') {
      this.listOfContacts = this.listOfContacts.filter((res) => {
        return res.firstName.toLocaleLowerCase().match(this.firstName.toLocaleLowerCase());
      });
    } else if (this.firstName == '') {
      this.ngOnInit();
    }
  }
}

I want that when I enter things in the search field that mobileNumber is also searched for or the other items in the objects of the array are searched for, so not just firstName but all other items as well.

Unfortunately, at the moment it only works with firstName, so the other items from entry are not searched for

Solution

While writing code name of the variable should be defined what they are meant for: if you want it to search everything it should be called searchText:

<input type="text" [(ngModel)]="searchText" (input)="Search()" placeholder="Search" /> 

Search is only searching on name since you have not compared it with anything else.

    Search(){
    
      if(this.searchText!== ""){
    let searchValue = this.searchText.toLocaleLowerCase();

        this.listOfContacts = this.listOfContacts.filter(contact =>{
          return contact.firstName.toLocaleLowerCase().match(searchValue ) ||
    contact.secondName.toLocaleLowerCase().match(searchValue) ||
    contact.email.toLocaleLowerCase().match(searchValue);
 // you can keep on adding object properties here   
    
        });
    
      }else {  // if(this.searchText== ""){ you don't need this if
        this.ngOnInit();
      } 
}
  

Answered By - vaira