I want {{item.registration.patientId}} to be searchable instead of {{item.mainId}}. See JSON file and notice that patientID is an object inside registration.

The search works when I search for mainId but it doesn’t when I replace mainID with patientId in the TS file. Also, if I replace mainId with sequence, the search works too. It does not work on any fields which is inside {{item.registration.xxx}}.

I also tried replace mainId with registration.patientId in the TS file inside the function getDetail() but that doesn’t work either. It continues showing all the 10 items.

This is on my patient.component.html file:

<div>
    <input type="text" class="form-control" placeholder="ID" #myInput>
    <button (click)="getDetail(myInput.value)" type="button">Search</button>
</div>

<div *ngFor="let item of bills; let count = index">
    <div>{{count +1}}</div>
    <div>{{item.registration?.patientId}}</div>
    <div>{{item.mainId}}</div>
    <div>{{item.registration?.firstName}}</div>
    <div>{{item.registration?.mobile}}</div>
</div>

This is on my patient.component.ts file:

export class ViewBillsComponent implements OnInit {
  public bills = [] as Billing[];
  public componentQuery = new HttpParams();
  public paginationData = {} as Pagination;
  constructor(
    private coreService: CoreService,
  ) { }

  ngOnInit(): void {
    this.getBills();
  }

  getBills(){
    this.coreService.getBillings(this.componentQuery).subscribe({
      next: (res: any) => {
        this.bills = res.data;
        this.paginationData = res
      },
      error: (err) => {
        console.log(err);
      }
    })
  }

  getDetail(searchId= ''){
    console.log(searchId)
    this.componentQuery = this.componentQuery.set('mainId', searchId);
    console.log(this.componentQuery)
    this.getBills();
  }

  paginateTo(page:number){
    this.componentQuery = this.componentQuery.set('page', page)
    this.getBills()
  }
}

Notice that {{item.registration.patientId}} is an object while mainId is outside of the {{registration.xx}}. This is the JSON file:

{
    "status": "success",
    "data": [
        {
            "_id": "66ad004d952855f99c907d7c",
            "registration": {
                "_id": "66ad001f952855f99c907d1e",
                "firstName": "Test5001",
                "lastName": "Leone",
                "mobile": 3987298279,
                "createdAt": "2024-08-02T15:49:51.848Z",
                "updatedAt": "2024-08-02T15:49:51.848Z",
                "sequence": 21,
                "patientId": "PT21",
                "__v": 0
            },
            "amount": 0,
            "date": "2024-08-02T15:50:00.000Z",
            "createdAt": "2024-08-02T15:50:37.934Z",
            "updatedAt": "2024-08-02T15:50:37.934Z",
            "sequence": 45,
            "mainId": "ID45",
            "__v": 0
        },
        {
            "_id": "66ad003c952855f99c907d50",
            "registration": {
                "_id": "66ad003c952855f99c907d46",
                "firstName": "John",
                "lastName": "Wick",
                "mobile": 847900919,
                "createdAt": "2024-08-02T15:50:20.043Z",
                "updatedAt": "2024-08-02T15:50:20.043Z",
                "sequence": 22,
                "patientId": "PT22",
                "__v": 0
            },
            "amount": 500,
            "date": "2024-08-02T15:49:00.000Z",
            "createdAt": "2024-08-02T15:50:20.121Z",
            "updatedAt": "2024-08-02T15:50:20.121Z",
            "sequence": 44,
            "mainId": "ID44",
            "__v": 0
        },
    ]
}